Need help? Check out our Support site, then


CSS Image alignment - extend image to header and footer

  1. I'm looking to use CSS to reposition an image flush to the left margin, leaving no space between the edge of the webpage and the image. I would also like this image to extend up to the header and end at the footer widget. Does this require several divs or how do I proceed with coding this portion of the webpage?

    Thank you!

    The blog I need help with is indigocapital.ca.

  2. Hi there, can you point me to the location or page where you want to do this and I can take a look for you. I'm not seeing anything on your site that looks like the right page right now.

  3. Hello! The changes will be made to the homepage. The image I would like to have extended is the IND IGO. The text that is currently underneath will be moved to the right of that image.

  4. Hi, you can give the following a try and see what you think. We may have to do some additional adjustments once you have the text moved.

    body:not(.no-sidebar).home .site-content-wrapper {
    	margin-left: 0;
    	width: 100%;
    	max-width: 100%;
    }
    body:not(.no-sidebar).home .content-area {
    	width: 100%;
    }
    body:not(.no-sidebar).home .content-area .hentry-wrapper {
    	width: 100%;
    	max-width: 100%
    }
    body:not(.no-sidebar).home .site-content-wrapper #post-40 {
    	padding: 0;
    }
  5. Thank you so much! How do you suggest creating an additional column with margins to place the text in?

    Also, do you know the proper selector for the wordpress logo that appears in the credits? I previously used footer-credit to center the logo, but no changes occurred.

  6. Hi, for the WordPress footer logo, add the following to center it.

    .site-info {
    	margin-left: auto;
    	margin-right: auto;
    }

    Having the text to the right of the image may be a bit tricky. First thing you will need to do is to edit the front page and wrap the image in a div with a new CSS class, and then do the same for the text below. It would look like this.

    <div class="frt-img">
    <h3 style="text-align:justify;"><img class="  wp-image-89 alignleft" src="https://indigocapital.files.wordpress.com/2017/01/ind-igo1.png?w=2040" alt="ind-igo" width="810" height="678" /></h3>
    </div>
    <div class=frt-txt">
    <h3 style="text-align:justify;"><span style="color:#ffffff;">We believe that the key to innovation and growth is equal parts creativity and execution. Indigo Capital is in the business of bringing them together.</span></h3>
    <h1><strong><span style="letter-spacing:5px;color:#727eaf;">IDEAS</span><span style="letter-spacing:5px;color:#ffffff;"> IN ACTION.</span></strong></h1>
    </div>

    We can then work on getting the text to the right of the image.

  7. Thank you! The code successfully centered the footer logo, but still appears on the left in the tablet and mobile views. In regards to the body text, I tried to float the text right, but no changes appeared. What is your suggested method to move the text?

You must log in to post.

About this Topic