Skip to main content
hope1
hope1
Participating Frequently
June 6, 2019
Question

css and background images / colors

  • June 6, 2019
  • 3 replies
  • 321 views

Hi......thank you for reading...

Have many html pages, all w different background images and background colors

In css, can you have many background images listed, yet assigned to different pages in one css doc? or do you have to have a different css sheet for each page?

What do you think?

Warmly,

Hope

so far looks like:

@charset "ISO-8859-1";
body {
background-image: url(../full_rollover_lite/main_pages/about_us/images1/basket_bkg_mvoa.jpg);
background-repeat: no-repeat;
background-color: #FFF275;
}
body,td,th {
color: #990033;
font-family: "Times New Roman", Times,
This topic has been closed for replies.

3 replies

hope1
hope1Author
Participating Frequently
June 6, 2019

hi

i am not a coder, smile, so if you could bear it....

On each page: about, contact,

in body tag there,

i would add the class as shown.

eg,

one page body tag is like this:

     <BODY ONLOAD="preloadImages();" link="#006666" vlink="#006633" alink="#00FF00">

so i would change it to:

     <BODY CLASS='about', ONLOAD="preloadImages();" link="#006666" vlink="#006633" alink="#00FF00">

adding

class='about',

yes?

then in the css sheet i would put like this for each page

body.about {background-image:url(about.jpg);}

body.portfolio {background-image:url(portfolio.jpg);}

What do you think?

Warmly,

Hope

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
June 6, 2019

Get rid of the coma after class="about" that's not correct. It's also best to stick with one type of quote marks, unless they're nested within each other, so...

<body class="about" onload="preloadImages();" link="#006666" vlink="#006633" alink="#00FF00">

Also, you should use CSS to take care of your link colors, so you can delete the link, alink and vlink stuff you have there and add the following to the top of your .css file....

a:link {color:#006666;}
a:visited {color:#006633;}
a:active {color:#00FF00;}

hope1
hope1Author
Participating Frequently
June 6, 2019

that is so very kind of you dear Jon,

thank you so much

for all your time, you too Ben...

so appreciate

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
June 6, 2019

Assign a class to the body tag and use that as the selector, like

body.home {}

body.about{}

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
June 6, 2019

You can control all of your page's backgrounds from one file pretty easily, but you'd likely need to make a small edit to each page to get it set up.

What I would do is give every page's <body> a class with the page name...

<body class="about"> for the About page
<body class="portfolio"> for the Portfolio page
etc

Then, in your css file, you could have a list of selectors with background attributes like...

body.about {background-image:url(about.jpg);}
body.portfolio {background-image:url(portfolio.jpg);}

That would keep everything centralized and when you want to change a page's background, all you would need to do is open the .css file, scroll to that page in the list and update the image url.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices