Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Gavin Mace
Gavin Mace
30,747 Points

How can I move a CSS background-image into my HTML file?

Hey,

I have a header background image set in my CSS and I'm migrating my website to WordPress, so I'm wanting to move the background image setting into the HTML so that I can add a PHP tag and control the background image from within WordPress.

I've tried adding both of these separately to HTML and commenting out the background of the CSS and nothing's showing:

<section background="img/background-image.jpg" class="content-hero">

<section background-image: url('img/background-image.jpg') class="content-hero">

    <section class="content-hero">
      <div class="wrap">
        <div class="row">
          <div class="small-12 medium-12 large-12 text-center column">
            <h1>Blog</h1>
          </div>
        </div>
      </div>
    </section>

.content-hero {
  background: url("../img/background-image.jpg") #202020 no-repeat;
  background-size: cover;
  max-height: 400px;
  max-width: 100%;
}

I assume to be able to edit these background images in WordPress, I need to move the setting out of the CSS and into the HTML/PHP page.

Any tips for what should work here?

Thanks in advance,

Donghyeok Yun
Donghyeok Yun
4,514 Points

You could possible do

 <section style="background-image: url('../img/background-image.jpg');">
           <!-- Then, put whatever contents you want to :) -->
 </section>

And Please Tell me the result if it worked or not :)

1 Answer

Miguel Canas
seal-mask
.a{fill-rule:evenodd;}techdegree
Miguel Canas
Python Development Techdegree Student 11,470 Points
Miguel Canas
.a{fill-rule:evenodd;}techdegree
Miguel Canas
Python Development Techdegree Student 11,470 Points

Hi Gavin,

Donghyeok Yun has a great answer.

Another method you could try is to update the class attribute using PHP and change the background-image property in CSS based on the class.

For example,

In your CSS file:

.content-hero {
  background-color: #202020;
  background-repeat: no-repeat;
  background-size: cover;
  max-height: 400px;
  max-width: 100%;
}

.theme-1 {
  background-image: url('../img/background-image-1.jpg');
}

.theme-2 {
  background-image: url('../img/background-image-2.jpg');
}

And in your template:

<?
  if($someSetting == true) {
    $myTheme = "theme-1";
  } else {
    $myTheme = "theme-2";
  }
?>

    <section class="content-hero <?= $myTheme ?>">
      <div class="wrap">
        <div class="row">
          <div class="small-12 medium-12 large-12 text-center column">
            <h1>Blog</h1>
          </div>
        </div>
      </div>
    </section>

With this option you can keep your style rules inside your stylesheet.

Hope that helps!

~ Miguel

Donghyeok Yun
Donghyeok Yun
4,514 Points

Hey I learned something from you. Thanks