background image changing on every page when i change it on one.

Report · Sep 24, 2023

Hello this is my first time trying to build a basic webpage and i am having an issue with my background image. I have a total of 7 pages that i have linked together through hyperlink buttons. The issue im having is that when i change the background image on one of those pages it changes the background image on all 7 of them at the same time. Not only can i not set an individual background image i cant change any of the properties without it changing it on the other pages in real time.

What am i doing wrong?

Report · Sep 24, 2023

You are not leaving us much to go on. The cause can be one or more of many code errors in your document. As we are not privy to the code, it is not possible for us to help you.

Assuming that you do not have an online version of the site, you could paste your code here for us to look at.

Wappler, the only real Dreamweaver alternative.

Report · Sep 24, 2023

If all pages are linked to the same CSS File, then yes, changes to the body selector will definitely effect all 7 pages.

To add page specific styles, you'll need to use embedded CSS styles in your target document's <head> tags.

<style>

/**Page specific styles here**/

body {property: value}

</style>

Reference:

https://www.w3schools.com/css/css_intro.asp

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 24, 2023

If I understood correctly your aim, you can also use, as Eric Meyer proposed a few years ago, a CSS signature... It's funny, few days ago @B i r n o u had a word about this topic in the tribute to Molly.

Concretely, this means that you could assign a different class to the BODY tag for each page, and you can thus assign a different background (and other properties) independantly to each page :

<link rel="stylesheet" type="text/css" href="yourpath/styles.css">
<body class="home">
</body>

<link rel="stylesheet" type="text/css" href="yourpath/styles.css">
<body class="about-us">
</body>

<!-- and so on -->

then on your unique CSS, styles.css linked to each page :

body {
  margin: 0; 
  padding: 0; 
  width: 100vw; 
  height: 100vh; 
  background-size: cover;
  background-repeat: no-repeat;
}
.home {
  background-image: url('yourpath/home.avif');
  /* other properties */
}
.about-us {
  background-image: url('yourpath/about_us.avif');
}

Report · Sep 25, 2023

Well, it's true that the original idea of CSS signatures was to allow each user to customize browser styles, affecting only the site in question, but it's also true that they allow us to add subtleties to pages independently of each other.

Report · Sep 25, 2023

The OP wrote: "this is my first time trying to build a basic webpage..."

Translation: Keep it simple.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 26, 2023

Translation: Keep it simple.
By @Nancy OShea

I'm just curious, isn't copying and pasting the code proposed in my previous comment simple enough?

Report · Sep 26, 2023

Translation: Keep it simple.
By @Nancy OShea

I'm just curious, isn't copying and pasting the code proposed in my previous comment simple enough?

By @L e n a

Far too simple, can't you post a much more complicated and complex solution, like a really good, skilled professional web developer would use?

You know the kind of professional approach that maybe watches to see what the name of the file being loaded into the browser is, maybe consider using a bloated library of some description...........wink, 😉

Maybe throw in a compiler and bundler workflow as well while you're at it just to make sure.

Adobe Community

background image changing on every page when i change it on one.