Background url

[donboe]

Is there some kind of way to declare just the url without the actual image? I mean right now I have the following in my css

.masterhead_home
{
	background-image: url(../images/page-backgrounds/mobile/home.jpg);
}

@media only screen and (min-width: 768px) 
{
	.masterhead_home
	{
		background-image: url(../images/page-backgrounds/desktop/home.jpg);
	}
}

and this in the template:

<section class="masterhead masterhead_home">

</section>

But this is just for one page and I have to do this for about 40 page and the images are coming from the database based on the page_id so for me it would be much easier if i could just have the background-image property inline but than based on the screen size (desktop or mobile) and than have the image dynamically attachedto it:

Does this make any sense? Thank you in advance

[evoluer2]

Hi donboe,
Like you said, with the above css, you can create a background image for one page. But for 40 pages it is not advisable to create a separate class for each page. Your options are

1. Use internal css (css at the top of the view page) with the dynamic image as background
2. Using javascript to change the background dynamically
3. Generating the css dynamically. something like this: if (page-id==“20”){background-image: url(…/images/page-backgrounds/desktop/home.jpg);}

[SamA74]

@donboe

I have to do this for about 40 page

Can you clarify, Do you have different images for different pages and that is why you have to do this 40 times rather than linking to a single global CSS?
In CSS it would need a preprocessor.

@donboe

the images are coming from the database

But it sounds like there is some back-end activity going on, so there is another way.
I have some sites which use different background images in the header, so I apply then within style tags in the head where PHP fills in the filename.
So in the head of my HTML template file I have something linke:-

<style>
   header { background: url('assets/images/background/<?= $bgimg ?>-small.jpg') no-repeat ; }
			
  @media screen and (min-device-width: 590px) and (min-resolution: 2dppx) { /* For Double density "Retina" screens */
        header { background: url('assets/images/background/<?= $bgimg ?>.jpg') no-repeat ; }
  }
</style>

Where $bgimg is defined in the PHP controller script for the page. If you are pulling the filename form your database, this should be doable.