Viewing Fullscreen and fixed background image for website

  1. Portal Home
  2. Forum
  3. EverWeb
  4. How do I...?

Fullscreen and fixed background image for website



User: Bruce D. 12 years ago
I am working on a website in ever web and I want to know how can I have the background-image adapting to the screen-size and make it static or fixed? I want the background image to be fullscreen no matter the users screen resolution. Can I use an html snippet to make it work? I would like the image to resize itself to fit any screen. I have seen some codes to make it work in iWeb but it doesn't seem to work with everweb. Thank you
User: Jumbo T. 12 years ago
Like this :

http://trotter.is-best.net/wallpaper/

The code is on the page. Paste it in the HEAD code box of the site or the page.

Use your own image.
User: Roddy 12 years ago
Fixing the background…
http://everwebcodebox.com/layout/background-image.html

Using jQuery BackStretch…

http://everwebcodebox.com/layout/backstretch.html

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Bruce D. 12 years ago
Thank you for your responses! I have tried both ways and the picture is on the page but it is not full screen and all of my content is below the picture. I have attached a screen shot of what it looks like. Thanks

Screen Shot 2014-03-28 at 4.23.08 PM.png
User: Roddy 12 years ago
The fact that we can see CSS code means you haven't enclosed it in style tags and have probably inserted it in the wrong place.
To get help you would need to publish the page to a server and post the URL.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Bruce D. 12 years ago
This is the code that I pasted into the head code in EverWeb (with my pic url):
<style type="text/css">
body {
background-color: #000000;
background-image:url('{!-ASSETSPATH-!}Images/bkg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
}
/* Option - Delete if not required - See below for more info */
div.container {
background-color:rgba(0,0,0,0.5);
}
/* End of Option */
</style>


This is a screenshot of what I have now. Thanks

Screen Shot 2014-03-28 at 4.41.18 PM.png
User: Roddy 12 years ago
Your code won't publish in the forum unless you convert it. If you don't know how, use this website.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Bruce D. 12 years ago
This is the code that I used in the head code of my page in EverWeb. Thanks for your help!
<style type="text/css"><br />
body {<br />
background-color: #000000;<br />
background-image:url('{!-ASSETSPATH-!}<a href="http://s67.photobucket.com/user/brucedun1/media/IMG_0507copy2_zpsdd5a91bf.jpg.html" target="_blank"><img src="http://i67.photobucket.com/albums/h302/brucedun1/IMG_0507copy2_zpsdd5a91bf.jpg" border="0" alt=" photo IMG_0507copy2_zpsdd5a91bf.jpg"/></a>');<br />
background-repeat:no-repeat;<br />
background-attachment:fixed;<br />
background-position:top;<br />
}<br />
<br />
</style>

Last edit 12 years ago
User: Bruce D. 12 years ago
I also tried to use the query-backstretch and when I tried to download it I get this (screenshot). How do I use this? Thanks

Last edit 12 years ago
User: Bruce D. 12 years ago
sorry forgot screen shot

Screen Shot 2014-03-28 at 8.08.27 PM.png
User: Bruce D. 12 years ago
Thank you for all of your help! I got the Jquery backstretch to work. It did exactly what I wanted it to do. Thanks again
User: Jumbo T. 12 years ago
It can be so simple :

http://trotter.is-best.net/wallpaper/bruce.html


Post Reply
You must login or signup to post.