Highlighted

css and background images / colors

Explorer ,
Jun 06, 2019

Copy link to clipboard

Copied

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,

Views

96

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

css and background images / colors

Explorer ,
Jun 06, 2019

Copy link to clipboard

Copied

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,

Views

97

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 06, 2019 0
Adobe Community Professional ,
Jun 06, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 06, 2019 1
Adobe Community Professional ,
Jun 06, 2019

Copy link to clipboard

Copied

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

body.home {}

body.about{}


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 06, 2019 1
Explorer ,
Jun 06, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 06, 2019 0
Adobe Community Professional ,
Jun 06, 2019

Copy link to clipboard

Copied

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;}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 06, 2019 1
hope1 LATEST
Explorer ,
Jun 06, 2019

Copy link to clipboard

Copied

that is so very kind of you dear Jon,

thank you so much

for all your time, you too Ben...

so appreciate

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 06, 2019 0