Register

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 5 of 5
  1. #1
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times

    Need Help with Responsive Design question?

    Sorry I posted this in the wrong place. I just posted it in the right spot so you can delete this.



    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*/
    Last edited by Fireproofgfx; Feb 23rd, 2019 at 02:21 PM.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,679
    Member #
    5580
    Liked
    714 times
    Are you talking about the logo (Pacheco Rottweilers)?

    Everything else seems to look OK on different sizes.


  4. #3
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    That's weird but good. When viewed on my Iphone and my wife's Iphone the main header image doesn't shrink down properly. But after you said that it looks fine I checked it on Responsinator - pachecorottweilers.com/new_rott/ and it is right.... That's odd.

  5. #4
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    So I am still baffled as to why the photo doesn't show properly on my phones (Iphone 6s and Iphone Xs Max) and the sites header Background images are huge and you can't tell what the image is

    IMG_6411 (1).jpg

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,679
    Member #
    5580
    Liked
    714 times
    I looked at it now using my wife's iphone 5s, and you're right, it's not showing correctly.

    What happens when you remove this line?
    height: 100vh; /*fills viewport with image VH means 100% of Viewport */



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 01:34 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com