Background color around background image
Permalink
I am new to concrete5. I am trying to change the background color surrounding a background image to another image instead of a color? I am using the Plain Yogurt theme. I found in the main.css, how to change the background image and how to change the background color. However, I can't figure out how to change the color to an image.
Any help would greatly be appreciated.
Any help would greatly be appreciated.
Thanks for you help, I'm almost there. When I add the code it created the surround background correctly. However the inner background is not sized correctly.
I tried using the following code under the #page command to adjust the size:
background-size: 960px 727px; and also background-size: 100%
But the image is cut off and on my second page it is very small. What am I missing?
I tried using the following code under the #page command to adjust the size:
background-size: 960px 727px; and also background-size: 100%
But the image is cut off and on my second page it is very small. What am I missing?
I don't think you can resize backgrounds like that, at least not in a way that is widely supported at this point. I'm not a CSS expert. I think you'd have better luck resizing the actual source image to the correct dimensions.
Otherwise you'll need to add the image in your HTML with an "img", using position:absolute to remove it from the page flow and get it behind your other content, and then you can set the height and width.
Or better yet add the image using an image block from within concrete5 and then give it absolute position. Does this point you in the right direction?
Otherwise you'll need to add the image in your HTML with an "img", using position:absolute to remove it from the page flow and get it behind your other content, and then you can set the height and width.
Or better yet add the image using an image block from within concrete5 and then give it absolute position. Does this point you in the right direction?
Can you give me detailed instructions for using the image block solution you listed? I can't seem to figure out how to set it up so that it works for this issue.
I'll get back to you as soon as I can, hopefully later today.
The short version in case it helps, sorry if I get anything wrong off the top of my head! :
Add an image block, positioning is going to be probably the hardest part to nail down depending on how dynamic your page layout is. If this area of you page is always at the exact same pixel location, it doesn't matter where you add the image block, but I'm guessing your best bet is at the top of whatever "area" you're dealing with, maybe your main area. Then click the image block in edit mode and choose "design". In in the CSS tab, under "additional css:" put the following:
This should get you started. There could be something I've missed, but I'll look over it later. Let me know how it goes. Once again, I usedhttp://www.w3schools.com as a good reference for syntax and such.
The short version in case it helps, sorry if I get anything wrong off the top of my head! :
Add an image block, positioning is going to be probably the hardest part to nail down depending on how dynamic your page layout is. If this area of you page is always at the exact same pixel location, it doesn't matter where you add the image block, but I'm guessing your best bet is at the top of whatever "area" you're dealing with, maybe your main area. Then click the image block in edit mode and choose "design". In in the CSS tab, under "additional css:" put the following:
position: absolute; z-index: 0; width: 100%;
This should get you started. There could be something I've missed, but I'll look over it later. Let me know how it goes. Once again, I usedhttp://www.w3schools.com as a good reference for syntax and such.
None of this seems to be working. I am thinking of just designing the background with the image already in it and saving it as one file.
My only issue is, what the code needs to be to ensure it expands to cover the whole background?
My only issue is, what the code needs to be to ensure it expands to cover the whole background?
Yes, that will be the issue. And the underlying issue is going to be image size (download time/user experience). You can simply make an image big enough that it covers most people's browser area and use
But creating an attractive image that also fills everyone's screen may be difficult depending on your audience.
Maybe if you have more specifics about where you're running into problems, I or someone else could help more with the original approach.
background-position: center center;
But creating an attractive image that also fills everyone's screen may be difficult depending on your audience.
Maybe if you have more specifics about where you're running into problems, I or someone else could help more with the original approach.
Sorry read that wrong first time in your theme customization click "add your css" than enter this
body {background-image:url('http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg');}
Change the url to the url to your preferred background image,
Screenshot attached
body {background-image:url('http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg');}
Change the url to the url to your preferred background image,
Screenshot attached
CSS3, the newest version of CSS that the newest browsers can interpret, allows for multiple backgrounds in a single area, but probably an easier way to achieve this would be to set the surrounding background image using the body{} area, and set another background image in another div, perhaps #page{}, or #central{}. It might look like:
Good Luck!