Responsive picture / main page

[jiihoohoo]

I want to put picture in my main page (first page). I want to put some text in the picture (insde picture? ), so how I do picture and text? Text have to be responsive also... Photoshop?

http://www.tmijaakkoherttua.fi/wordpress/

[Carlo]

Hi jiihoohoo. Do you mean the picture that shows up on the link you've provided? I think the best way would be to put the text inside an HTML div and give it a background image in your theme stylesheet. You could hard-code this or make it a shortcode. Let me know if you'd like more help.

---

Comprehensive, easy to follow Genesis documentation

[jiihoohoo]

Carlo, Yes I mean that my first page big picture. I want text inside the picture. And I want that text is also responsive...
Could you tell (show) how I do that?

Thanks...

[Carlo]

OK. Instead of your image, add the following content in the Text mode of your WordPress editor:

<div class="jh-image-background">

PUT YOUR TEXT HERE

</div>

Then, in your theme stylesheet, add this code:

.jh-image-background {
background-image: url(http://www.tmijaakkoherttua.fi/wordpress/wp-content/uploads/2015/01/DSC01333mv.jpg);
background-size: contain;
background-repeat: no-repeat;
color: #fff;
width: 1000px;
height: 750px;
}

---

Comprehensive, easy to follow Genesis documentation

[Author]

Posts