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

WordPress

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Somethng wrong?

did i missed something?\

<div class="resources-intro" styles="background-image=url<?php echo get_field('background-image'); ?>">

3 Answers

Sean Henderson
Sean Henderson
15,413 Points

First, change styles= to style=. See the "Inline Styles" example at http://www.w3schools.com/css/css_howto.asp.

<div class="resources-intro" style="background-image=url<?php echo get_field('background-image'); ?>">

Now, remember that everything inside the "" after style= is actually CSS, not HTML or PHP. The format for CSS is property-name: value;. For adding a background image, we can use the background-image property which can accept the value url(http://example.com/image.png). So first let's update the code to use proper CSS syntax by changing the = to a :.

<div class="resources-intro" style="background-image: url<?php echo get_field('background-image'); ?>">

Now we need to surround the PHP statement in parenthesis, since it will turn into the final url, and add the ; to the end of the CSS declaration.

<div class="resources-intro" style="background-image: url(<?php echo get_field('background-image'); ?>);">

After these changes, the final HTML should like like this:

<div class="resources-intro" style="background-image: url(path/to/image.jpg);">

This is valid HTML with inline CSS, so assuming the image exists and the PHP side is in order, you have your background image!

Check out http://www.w3schools.com/cssref/pr_background-image.asp for more info on background declarations in CSS.

Konrad Pilch
Konrad Pilch
2,435 Points

Oh right. Thank you for this detailed answer! I need to go over everything and start from pure HTML and CSS as well :d i did it working last week, i forogt ;d thank you very much! :)

Sean Henderson
Sean Henderson
15,413 Points

Yup, glad to help.

Sometimes you just need to break everything down into tiny steps :)

Konrad Pilch
Konrad Pilch
2,435 Points

You know, it still doesnt work. I mean, i know that the code is right, but i cant pull any of my images from my folder . Im making a WP theme, and it worked all last week on different project but even with the perfect code you wrote it doesnt work. I have no clue why.

kofi amoussou
PLUS
kofi amoussou
Courses Plus Student 7,381 Points
kofi amoussou
kofi amoussou
Courses Plus Student 7,381 Points

i usually like assigning background images to classes via css file much more convenient for me

Konrad Pilch
Konrad Pilch
2,435 Points

In this case, this way is good or i beleive better because it saves up a lot of work and at the end i dont think it does matter since the customer will be able to change the image, it will be ther, and all styles are with the class, apart from just background which is dynamic anywas.

kofi amoussou
PLUS
kofi amoussou
Courses Plus Student 7,381 Points
kofi amoussou
kofi amoussou
Courses Plus Student 7,381 Points

if you want the same background image for all pages, just add theme support in your functions file

          // Set up the WordPress core custom background feature.
  add_theme_support( 'custom-background', apply_filters( 'gridlumn_custom_background_args', array(
    'default-color' => 'ffffff',
    'default-image' => '',
    'sanitize_callback' == 'esc_url_raw'
       ) ) );
       ``` 

 this is the one i use for my theme