Forums

Adding aBackground Image with the CSS Edit?

Permalink
I noticed that I can add to the CSS in the theme I am using. I presume All themes?

I am currently using
Earthtones Stone
Which I like. but would like to have a background image in the top right corned at floats.

Any CSS code I've looked up seems to have to much info.

Am I able to do this easily? Or if I must modify the template. Where can I find it? It's not located in /concrete/themes/ ?

Thank You
 
stonereptiles replied on at Permalink Reply
I foudn the css file
body {
/* customize_body */ /* customize_body */
/* customize_body */ color: #ccc; /* customize_body */
line-height:21px;
background:#353535 url('images/main_bg.jpg') repeat-x top;; font-style:normal; font-variant:normal; font-weight:normal; font-size:14px; font-family:Arial
}


Seems it uses a BG image already.
Is there a way I could add a floating image in the top right corner? That will go over this background?
noXstyle replied on at Permalink Reply
noXstyle
Adding a new div element to elements/header.php and styling it accordingly will take you far. If there aren't elements specified, just browse for the header markup.
stonereptiles replied on at Permalink Reply
That would make sense.
How would I go about adding an image to the top right corner than? even if it scrolled away with the rest of the page. I should be able to set something up there.

But would I place it in the header? And what would I have to place. I'm really new to CSS

Thanks
noXstyle replied on at Permalink Reply
noXstyle
Well, really depends on your needs mate.

Just to make myself clear here: I'm talking about the 'header' of your html content (e.g. where your nav or logo might be located as well), not head in your html document.

And no, it isn't necessary on some cases to place there. Just makes your structure more logical in case someone else edits it.

But a couple of ways how you could go about making it happen:

If the desired background image isn't enormous, i.e. it fits inside your wrapper nicely, you could just append it there:
#wrapper {background: url('yourimage.png') no-repeat right top ;}


Otherwise make a new div-element right after the body like mkly mentioned, and add your background there. The width of that element should be at least the width of the wrapper (or container).
#my-new-bg {
  width: X px;
  background: url('myimage') no-repeat 65% 0;
}

You might want to adjust the value on x-axis according to your needs.

Lastly if you want a static background there, i.e. will remain in place on scroll, make an empty div somewhere with the width and height of your image and add the background:
position:fixed;
top:0;
float: right;
background: url('yourimage') no-repeat;
width: Xpx;
height: Ypx;


If you handle the background with an empty element (not wrapping any content inside), you might want to make sure the z-index is higher than the original background's and lower than the content itself. Otherwise it may hide parts of your content.

Hope this wasn't too confusing. Doing some trial and error will get you there...
mkly replied on at Permalink Reply
mkly
Well... you may have a bit more luck with a CSS forum, but hey why not.

Technically speaking in CSS 2 you can't have multiple background images.

In CSS 3 you can
http://www.css3.info/preview/multiple-backgrounds/...
but that won't work in Internet Explorer 7 and 8 and other older browsers that don't have good(or any) CSS 3 support.

There are some tricks to adding multiple backgrounds like sticking one big div inside the body and other stuff, but if you are just learning CSS this might just end up being very frustrating.