css float ?

Hello,

Working on a new site area and wanted to float an image over the template on right and left side, is this posible?

The css file I have is rather long, not sure where to place in code, and if this code would work:

Code:

---

}
Inherited from body.home.page.page-id-202.page-template-default.content-r
kentuckyweedradio.com/media="screen, projection"
body {
    color: #cdc9c9;
    font-size: 12px;
    font-family: 'normal';
    position: relative;
    background: url(images/back-body.jpg) top center no-repeat, url(/wp-content/uploads/2014/08/bg-left.png) left top no-repeat fixed, url(/wp-content/uploads/2013/06/bg-right.png) right top no-repeat fixed;
    text-shadow: 1px 1px 1px #202020;
}

---

Or is there something from the:

CSS Library Image CSS. I can add?

Thank you in advance.

( not sure if I am allowed to add site link, to view my current css coding? )

In the event I am allowed to add my test link:

http://constructionbannerexchange.com/kwr2/

If this is not allowed, please remove link and I can upload css file.

Thank you.

In general links are ok if it is to post a resource to help a member such as a link to a regular expressions forum or a particular function at php.net or if you want to demonstrate a script you are working on. It is usually required if you need help with a script on your site. The moderators enforce this on a case by case basis. In your case it was a good idea to post your site so that we can get a better idea of what you are referring to.

Can you give an example of what you are trying to do with your floats? Will they remain stationary when the user scrolls down so that they are always visible or are they more of an extension to your banner or will it overlap the banner to some degree? I notice you are looking for help modifying a wordpress template. Some members here might be knowledgeable about modifying Wordpress templates. Often the people at Wordpress are better equipped to answer those types of questions.

If you're new to Wordpress don't mess with the installed theme CSS. Just add the Simple Custom CSS plugin and put all of your stuff in there.

Don't forget to make a child theme before you change anything.

I have a site at: http://kentuckyweedradio.com that I am redoing.

I want the images of the leaves on right and left of template to appear on right and left ( over ) the new site area at:

http://constructionbannerexchange.com/kwr2/

Which will later become the main site of first domain.

@styxlawyer

If I use the plugin ( without ) a child theme, and add the code, how would I edit what I put in there in the event it comes out incorrectly?

@james438

Yes I think stationary is best.

Thank you in advance.

Quote:

---

@styxlawyer

If I use the plugin ( without ) a child theme, and add the code, how would I edit what I put in there in the event it comes out incorrectly?

---

Just access the plugin and it will open a code window so that you can edit you CSS. All the additional CSS you put in will appear on the served page immediately before the </head> tag so will override sttings from any included files.

Thank you.

Dose this look correct to post two images on right and left sides of the template:

background: url(images/back-body.jpg) top center no-repeat, url(/wp-content/uploads/2014/08/bg-left.png) left top no-repeat fixed, url(/wp-content/uploads/2013/06/bg-right.png) right top no-repeat fixed;
text-shadow: 1px 1px 1px #202020;
}

so they are over the template and stationary with page?

Quote:

---

Originally Posted by Comex

Thank you.

Dose this look correct to post two images on right and left sides of the template:

background: url(images/back-body.jpg) top center no-repeat, url(/wp-content/uploads/2014/08/bg-left.png) left top no-repeat fixed, url(/wp-content/uploads/2013/06/bg-right.png) right top no-repeat fixed;
text-shadow: 1px 1px 1px #202020;
}

so they are over the template and stationary with page?

---

No. CSS3 renders multiple background images in layers from front to back so "back-body.jpg" would be in front of the two other images, which isn't what you are trying to achieve. "back-body.jpg should be the last image in the list.

This page might help.

Quote:

---

Originally Posted by Comex

.
I want the images of the leaves on right and left of template to appear on right and left ( over ) the new site ....
.

---

I just reread your post #5 and see that you actually want the two leaf images to appear on top of the rest of the site. You cannot do that with CSS background, so you'll have to place the images in the page and use CSS "z-index" to bring them to the front. You need to be aware that "z-index" only works on elements which have a "position" applied to them.

A good reference to "z-index" can be found here.

I am so lost now?

Does this look anywhere near what I am looking for?

Code:

---

div {
  width: 200px;
  height: 200px;
  padding: 20px;
}
 
.one, .two,  {
  position: absolute;
}
 
.one {
  background: http://imagefile name;
  outline: 5px solid #000;
  top: 100px;
  left: 200px;
  z-index: 10;
}
 
.two {
  background: http://imagefile name;
  outline: 5px solid #000;
  top: 100px;
  right: 100px;
  z-index: 100;
}

---