If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Member #
    171 times

    Responsive header Image??

    So I have been really trying to better my knowledge of responsive design lately when I have the chance. I have found some cool techniques along the way, but I am hung up on what to do to make the Header Image smaller on different devices.

    Here is how is the Header style is but I want to make the images smaller and keep them centered on different devices. What do you usually do? This is the is the site I am currently working on.

    HTML Code:
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url(img/header6.jpg);    
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/header6.jpg);    /*Linear-Gradient adds a gradient over the background image */    
    height: 100vh;    /*fills viewport with image VH means 100% of Viewport */   
    background-size: cover;    /*Tells browser we want to see the whole image*/  
    background-position: center;   
    background-attachment: fixed;    /*Keeps the background image in place when scrolling down the page*/


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 10:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: