I’ll often use an in-page style tag when I am developing a page, then move the style to a .css file when I have everything just like I want it. There are some cases though, when you must use an in-page style. Changing the background image is one.
For my responsive web page, I want to change the background image depending on the page that is being viewed. I could use an in-line style tag—style=”background: url(images/Hawk.jpg);” but I need more properties to make the background center and scroll. For readability, it is easier to put it in an in-page style tag and modify an existing style. At the same time I use some php to decide which image to display. Putting it right before the element that uses it also makes it easy to debug and change. (When you’re done, you need to move it to the
tag if you want your page to validate.)
<style>
.intro {
background: url(./images/<?php echo $page ?>.jpg) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
</style>
<header class="intro">