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

Homepage › Community Forums › Epik Theme Support › Home Feature 1 & 2: Can they have a background image with text on top

Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 24, 2014 at 5:37 pm #10922
    j_hampson
    Customer

      Hi
      My client’s designer had a shot of inspiration for the homepage and would now like a background image across Home Feature 1 & 2. He wants it tight to the edge of the widgets above and below, which will be my next challenge.

      I don’t need to float any text over Home Feature 2 (on the right) but I do need to on the left. Don’t want to put the text into a graphic unless I have to as I want search engines to pick up on it.

      So from a user point of view, it will look like a full-width seamless image with image on the left-side.

      The site in question: rcs.nextdev.co.uk

      Huge thanks in advance for any help you can offer.
      Jacqueline

      February 25, 2014 at 7:13 pm #10940
      Wes
      Moderator

        Since most of the Classes are repeated for each widget section, you’ll have to rename the div class that surrounds the home-feature-1 and 2. This can be found in your home.php file. Once you look in your file scroll until you see the widget section for home-feature-1 and 2, then replace that class (which will look like this – home-feature-bg-alt) with a unique class of your own. So you could call it hf-bg as an example, then go into your css file and add that as a Class…..then style it by adding the background image.

        .hf-bg {
    background: url(http://your-image.com);
}
        February 26, 2014 at 10:33 am #10989
        j_hampson
        Customer

          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

          February 26, 2014 at 4:26 pm #10999
          Wes
          Moderator

            try removing the width around line 1339 .hf-bg .wrap – 

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

            You won’t need to add a width since the .wrap (which is in the other part of the css) already handles it. It will automatically adjust to the browser.

            Then look around line 3978 and add this .hf-bg .wrap, to the list so your content won’t show up too close to the edge of the screen. This will put some space in between everything on the sides – 

            .site-header,
.nav-primary .wrap,
.nav-secondary .wrap,
.slider .wrap,
.welcome .wrap,
.hf-bg .wrap,
.home-feature-bg .wrap,
.home-feature-bg-alt .wrap,
.home-feature-bg-dark .wrap,
.footer-widgets .wrap {
	width: 90%;
}
            February 26, 2014 at 5:05 pm #11011
            j_hampson
            Customer

              Hi Wes

              Did that and it works great.

              Admittedly the mobile version puts a white border above and below the image which ideally wouldn’t be there. But I can live with that.

              Thank you so much for your help – you’re epic yourself.

              Best wishes
              Jacqueline

              February 26, 2014 at 5:37 pm #11012
              Wes
              Moderator

                The border is actually a white background which shows up because of the way the image is positioned when the browser is resized. We can fix it by adding background-size: cover; to the hf-bg on line 1329 in your css like this – 

                .hf-bg {
    background: url(http://rcs.nextdev.co.uk/wp-content/uploads/2014/02/couple-talking.jpg) center no-repeat;
    background-size: cover;
}
                February 26, 2014 at 6:07 pm #11016
                j_hampson
                Customer

                  Whatever comes after epic and awesome – you’re it!!!

                  Thank you so much Wes, it works like a dream and looks so cool.

                  I’m so chuffed (as we say here in the UK), can’t thank you enough.

                  Cheers Wes

                  February 27, 2014 at 5:38 am #11020
                  Wes
                  Moderator

                    You’re Welcome!

                  • Author
                    Posts
                  Viewing 8 posts - 1 through 8 (of 8 total)
                  • The topic ‘Home Feature 1 & 2: Can they have a background image with text on top’ is closed to new replies.