Announcement

**cbsteven** · 12-22-2013, 07:56 AM

There are various ways to do this. Are you familiar at all with HTML and CSS? This would be a good task to use to familiarize yourself with them, since it is a very basic CSS task.

CSS Introduction

and then

CSS background-image property

**dunkonu23** · 12-22-2013, 11:46 AM

Stephen, yes I have tried using css with this:

team {
background-image: url('assets/images/siteimages/backgroundalees.jpg') no-repeat center center fixed;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

From various places like tables, div's, etc.

**jleclair** · 12-22-2013, 12:48 PM

team isn't identified as a class nor an ID. thats why its not applying. for class it should be .team and if team is an element with an id it should be #team. Without specifying an id or class selector, the css looks for an html element like <team> which obviously does not exist.

**dunkonu23** · 12-22-2013, 01:44 PM

Hi and thanks. ".team" (my apology for the bad cut and paste) was applied to the default_modified.css and called via a class in table, td, and div's. I've done other classes like .price3 to make the price in the left right bars of frame.html white.

I'm wondering if anyone has actually done this with extrapage.html. BTW, my extrapage.html is edited to include only the slider code and [content], with comments intact as I read somewhere that comments were necessary for the software.

Scott

**jleclair** · 12-22-2013, 01:48 PM

post a link to the page and I'll take a look at it.

**dunkonu23** · 12-22-2013, 02:39 PM

Thanks.

Here's a link. I just changed the code to have <style></style> with no effect. I'll leave it there. default_modified.css has the .team class removed, as well...
ALeeSUSA Flight Team Members

Thank you again.

Scott

**jleclair** · 12-22-2013, 03:30 PM

background image must be applied to an element. you are just blindly applying it to nothing, that is why it's not working.

if you want the background image to show to the entire center area and even behind your slider, make a div, give it an id of background image for the sake of brevity.

your html would look like:

HTML Code:

<div id="backgroundImage">


    <!--wowslider markup goes here-->


</div>

and your css would simply say

HTML Code:

#backgroundImage  /*(matches the div we made in the html)*/
{
    background-image:url('assets/images/siteimages/backgroundalees.jpg') no-repeat center center fixed;
}

I'll go a step further to explain. At the most basic, all web pages are containers within containers within containers. <html> encompasses <body> and you put all the visible content within <body>. 3dcart goes a step further and creates a frame (frame.html) and inserts different content within the MIDDLE block. It's just another container.

When you are trying to add a background image to something, it has to be assigned to an element for the browser to know what you are intending. Whatever is stuck within that element will show as if it is on top of that background image. Vice-versa, that background image will only show in the space that the element occupies. Be sure the element has some sort of content in it, or specify a height and width or you won't even see it on the page.

Hope that makes sense.

**dunkonu23** · 12-22-2013, 04:14 PM

Thanks for that. I'll check it out. I appreciate your taking the time to do this.

Scott

**dunkonu23** · 12-22-2013, 04:55 PM

Thanks! I got it.

ALeeSUSA Flight Team Members

This got it.

<div style="background: url('assets/images/siteimages/backgroundalees.jpg') no-repeat center center fixed" > </div>

Scott

**jleclair** · 12-22-2013, 05:16 PM

Glad to help. Enjoy.

Announcement

Background image for extrapage.html

Background image for extrapage.html

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment