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

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

How do i add image via css in WP?

So imagine:

Developer - I want my customer to be able to put images , like parallax effect, but i need my image to be inserted in CSS.

How do i write the code so when the user updates the image in WP, it goes to CSS and activate?

Greg Adams
Greg Adams
13,268 Points

Hi Konrad-

You can create a parallax effect by changing the background of an element via CSS, making sure the to have this selector for the element displaying the image:

background-attachment: fixed;

This post was very helpful as I created my first one:

http://callmenick.com/post/simple-parallax-scrolling-effect

3 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Insert the image via an inline style tag on the element were the background image is suppose to be, so the html would look like this

<div class="background" style="background-image: url('link/to/image/from/wordpress.jpeg');">This is the div</div?

It's basically your only option. You can't manipulate CSS files on the fly like that.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Thank you! :D

Now i remember how i did it previously. Im pretty sure i did something like that so this must be the way :)

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Are you talking about dynamically adding a background image by selecting the image in the wp admin area?

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

I mean like

This is my css:

/* Intro Header */
.intro-header {
    background: url(img/intro-bg.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    color: #f8f8f8;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

Now, see that image url? I need to change that url so whenever a customer or an average Joe wants to add an image via wordpress in the admin area, the image will replace that intro-bg.jpg.

Greg Adams
Greg Adams
13,268 Points
Greg Adams
Greg Adams
13,268 Points

I believe they would need to edit the style sheet. Other ideas I had included replacing the intro-bg.jpg file used.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Thats why I'm talking via admin so they dont have to do this. Like if they know how to do it.