Reply To: Home Feature 1 & 2: Can they have a background image with text on top

Hi Wes

Thanks for your help (again) and especially as I now find out it was your birthday.

I tried what you proposed and most of it has worked – thanks – but I’m noticing problems with mobile responsive element.

Here’s the CSS code as it stands as present for the new bit that I called .hf-bg (as per your example):

.hf-bg {
    background: url(http://rcs.nextdev.co.uk/wp-content/uploads/2014/02/couple-talking.jpg) center no-repeat;
}

.hf-bg {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	overflow: hidden;
}

.hf-bg .wrap {
	margin: 0 auto;
	overflow: hidden;
	padding: 40px 0 0;
	width: 1140px;
text-align: left;
}

.hf-bg .featuredpage .page,
.hf-bg .featuredpost .post {
    float: left;
    margin: 0;
    overflow: hidden;
    padding: 0 0 5px;
}

.hf-bg .featuredpage .page h2,
.hf-bg .featuredpost .post h2 {
    margin: 10px 0;
}

.hf-bg .featuredpage .page h2 a,
.hf-bg .featuredpost .post h2 a {
	font-size: 15px;
}

.home-feature-bg .featuredpage img, 
.home-feature-bg .featuredpost img { 
	background: none;
	border: none;
	padding: 0;
}

.hf-bg .featuredpage img:hover, 
.hf-bg .featuredpost img:hover {
	opacity: .7;
	-moz-transition:all .5s ease;	
	-o-transition:all .5s ease;	
	-webkit-transition:all .5s ease;
	transition:all .5s ease;
}

.hf-bg .byline, 
.hf-bg .byline {
	font-size: 11px !important;
	line-height: 15px !important;
	margin: 0 0 8px !important;
}

.hf-bg p {
	margin: 0 0 25px;
}

Many thanks for any further insights you can offer.
Jacqueline