Skip to main content
S
sam324903212yn5
Participant
September 25, 2023
Question

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

  • September 25, 2023
  • 3 replies
  • 668 views

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?

    This topic has been closed for replies.

    3 replies

    L
    Community Expert
    L e n aCommunity Expert
    Community Expert
    September 25, 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');
}

     

     

     

     

     

     

    B i r n o u
    B i r n o u
    Legend
    September 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.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 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
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 25, 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
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    September 25, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices