Enlarge header Image to full size
-
Hello, I would like to change the size of my header image to fit the entire screen. I read in the thread below that the following code needs to be entered into the CSS editor:
#masthead {
background: url(“URL_OF_IMAGE”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
#masthead img {
visibility: hidden;I did this and copy/pasted my image location into the “URL_OF_IMAGE” spot. However the image is just black. Any suggestions. BTW, I am running the Motif theme.
The blog I need help with is: (visible only to logged in users)
-
-
Hi, the code above would simply replace the existing image with a different one. The #masthead div is contained within the #page div, so it can’t be any wider than the #page parent.
If you want an image to extend to the sides of the page, I would suggest putting the image in as a body background image. The image should probably be about 2500px in width and then whatever height you want it. The problem comes when someone is viewing things on a smaller screen or device (tablet or phone). Using the header image, the image resizes as the window/device gets narrower. We will have to use some trickery in order to accomplish that when taking the image full width.
If you can create an image the side you want and upload it to your media library and then post the URL of that image here, I can take a look at getting it to work and resize correctly as the browser window narrows and for smaller devices.
-
Ok, I tried this. The only problems I see are that I would like the Image to move as the page scrolls down. As a background image, it stays stationary. Is there any way to change this or is it something I would just have to live with. Also, Obviously being a background image, It extends the entire length of the page (stretching and distorting the image). Another thing is when I remove the header to display the background image, the text is moved up. My goal is to have a large picture that stretches from side to side and down near the bottom of the screen. Then have to scroll down to see a small amount of text I have. Thank you for the help!
-
Ok, I see there is an option to keep the image stationary, so that part is taken care of.
-
The background image can be controlled with CSS. You can try the following, which uses CSS positioning to move your existing image and stretch it full width. See what you think of this and then we can work on things. Your image is going to have to be about 1500px in height if you wish it to cover the background on large desktop monitors.
.site-image { left: 0; position: fixed; top: 0; width: 100%; z-index: -1; } #page { margin-top: 47%; } .site-image img { width: 100%; } -
Man, I’m stumped. When I tried this the first time. It seemed to work perfect. When the page loaded, it looked exactly how I wanted it to (full width header). But when i went back to my dashboard and came back to look at the CSS again, It moved the whole image down the page so I see mostly background. Not sure what I messed up.
-
Ok, it appears I had some useless code in there. Now I would like to have the image scroll with the page (instead of stationary as it is now). I remember seeing an option for this but can’t seem to find it now.
-
-
-
Now I would like to have the image scroll with the page (instead of stationary as it is now).
You should just be able to remove this one line from the CSS, since the default is to scroll:
position: fixed;
- The topic ‘Enlarge header Image to full size’ is closed to new replies.
WordPress.com Forums 