how do i set a different background on another page of my Website?

⋆Spicy_vinta⋆
Casual Poster ⚓︎

The Queen of Cans and jars Will Keep us Safe

⛺︎ My Room
SpaceHey: Friend Me!

how do i set a different background on another page of my Website?

« on: August 06, 2025 @14.13 »

I have been having trouble trying to set a different background on The second page of my website. Also asking if it would help to unlink my style sheet from the second page?

(sorry if this seems a little simple im just really new to Html and css.)


	Logged

My Blood is black y'know

Cobra!
Hero Member ⚓︎

’S fhearr Albais bhriste na Albais sa chiste

⛺︎ My Room
StatusCafe: cobradile
iMood:

Matrix: Chat!
XMPP: Chat!
Itch.io: My Games

Re: how do i set a different background on another page of my Website?

« Reply #1 on: August 06, 2025 @46.18 »

What I would do is keep the css file linking if you want to keep the other style aspects, and make a new style tag in head and add the background code there. Like so:

Code

<style>
body
{
   background: Put new bg here.
}
</style>


	Logged

“Snooping as usual, I see?”

⋆Spicy_vinta⋆
Casual Poster ⚓︎

The Queen of Cans and jars Will Keep us Safe

⛺︎ My Room
SpaceHey: Friend Me!

Re: how do i set a different background on another page of my Website?

« Reply #2 on: August 06, 2025 @72.27 »

Quote from: Cobra! on August 06, 2025 @46.18

What I would do is keep the css file linking if you want to keep the other style aspects, and make a new style tag in head and add the background code there. Like so:

Code
<style>
body
{
   background: Put new bg here.
}
</style>

It doesn't seem to work for me. Maybe my image is the problem? i'll put the link here just in case: https://imgbox.com/iutDOZX5


	Logged

My Blood is black y'know

tesseractcube
Casual Poster ⚓︎

let's be kind together!

⛺︎ My Room
iMood:

Re: how do i set a different background on another page of my Website?

« Reply #3 on: August 06, 2025 @143.75 »

what i would do is make a new id in the css for that specific background image and then make the body have that id.
css:
Code
#bg2 {
background-image: url(imageurl);
}


html:
Code
<body id="bg2">


but TBH we aren't the best at html/css, so i don't know   
EDIT: you should download the image you want and upload it to your site's dashboard! it really may be a problem with the link.   
- a


« Last Edit: August 06, 2025 @159.19 by tesseractcube »	Logged

⋆Spicy_vinta⋆
Casual Poster ⚓︎

The Queen of Cans and jars Will Keep us Safe

⛺︎ My Room
SpaceHey: Friend Me!

Re: how do i set a different background on another page of my Website?

« Reply #4 on: August 06, 2025 @211.01 »

Quote from: tesseractcube on August 06, 2025 @143.75

what i would do is make a new id in the css for that specific background image and then make the body have that id.
css:
Code
#bg2 {
background-image: url(imageurl);
}
html:
Code
<body id="bg2">
but TBH we aren't the best at html/css, so i don't know
EDIT: you should download the image you want and upload it to your site's dashboard! it really may be a problem with the link.
- a

it worked thanks so much

, i was having way too much trouble with this.

(i might have deepfried the original image too much)


	Logged

My Blood is black y'know

akchizar
Newbie ⚓︎

⛺︎ My Room

Re: how do i set a different background on another page of my Website?

« Reply #5 on: August 06, 2025 @374.48 »

FWIW, the problem you were likely facing was that CSS will apply properties:

based on their specificity
and if there's a tie for specificity, it'll use the last declaration in your file.

In your case, you've linked to your CSS file in the body of your page. If you happened to inline a new style in the head of your page (which is, obviously, above your body), the web browser will encounter two different declarations trying to set the background image of your page's body:

The first one through your embedded <style> tags, which is in your head.
The second one through your css file, which is in your body.

Both of them are applied using the body selector, so they tie in terms of specificity - and the browser will use the last one, which is your default.

By setting an id on your body, and then applying styles to the id, you've got a more specific selector for that declaration, so it'll trump anything else.


	Logged

Pages: [1]

« previous next »