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
Konrad Pilch
2,435 PointsSomethng wrong?
did i missed something?\
<div class="resources-intro" styles="background-image=url<?php echo get_field('background-image'); ?>">
3 Answers
Sean Henderson
15,413 PointsFirst, 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.
kofi amoussou
Courses Plus Student 7,381 Pointsi usually like assigning background images to classes via css file much more convenient for me
Konrad Pilch
2,435 PointsIn 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
Courses Plus Student 7,381 Pointsif 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
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsOh 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
15,413 PointsSean Henderson
15,413 PointsYup, glad to help.
Sometimes you just need to break everything down into tiny steps :)
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsYou 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.