Full-screen responsive background image

0 votes

I'm new to front-end development and the Foundation framework.

I'm attempting to make the div class="main-header"> a full-screen image that scales down responsively.

Could someone please tell me what I'm doing wrong? It is scaling properly, but it is not displaying the entire image. Is it possible to have the div class="large-6 large-offset-6 columns"> sit above it on a mobile device?

HTML code:

<!-- MAIN HEADER -->
<div class="main-header">
   <div class="row">
     <div class="large-6 large-offset-6 columns">
       <h1 class="logo">BleepBleeps</h1>
       <h3>A family of little friends<br>that make parenting easier</h3>
     </div> <!-- END large-6 large-offset-6 columns -->
   </div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->

The CSS:

.main-header {
    background-image: url(../img/bb-background2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

h1.logo {
    text-indent: -9999px;
    height:115px;
    margin-top: 10%;
}
Aug 4 in HTML by Abhinaya
• 760 points
12 views

1 answer to this question.

0 votes
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}


try this

answered Aug 4 by Deepak
• 760 points

Related Questions In HTML

0 votes
1 answer

How do I give text or an image a transparent background using CSS?

In order to ensure that your image ...READ MORE

answered Feb 8 in HTML by Rahul
• 9,000 points
110 views
0 votes
0 answers

Responsive image map

I have included the image map in ...READ MORE

Jun 3 in HTML by Tejashwini
• 1,660 points
32 views
0 votes
1 answer

unable to load image file using <img> tag

This error means that file was not ...READ MORE

answered Oct 7, 2020 in HTML by Niroj
• 82,740 points
2,649 views
0 votes
0 answers

How to hide image broken Icon using only CSS/HTML?

I need to hide this error image/ ...READ MORE

May 27 in HTML by Tejashwini
• 1,660 points
86 views
0 votes
0 answers

how to display an image inside SVG circle in html5?

is there a way to display an ...READ MORE

Jul 4 in HTML by Tejashwini
• 1,660 points
10 views
0 votes
0 answers

Why image in HTML is showing as broken image

I have the following HTML code and ...READ MORE

Jul 4 in HTML by Tejashwini
• 1,660 points
17 views
0 votes
0 answers

Responsive css background images

I have a website (g-floors. EU) and ...READ MORE

Jul 8 in CSS by Edureka
• 9,940 points
10 views
0 votes
0 answers

Make a full screen CSS background image appear "behind" a mobile keyboard

I've set an HTML/CSS full-screen background image ...READ MORE

Jul 18 in CSS by Edureka
• 9,940 points
12 views
0 votes
1 answer

Common CSS Media Queries Break Points

We don't need to define separate CSS ...READ MORE

answered 6 days ago in CSS by Tanishqa
• 700 points
10 views
0 votes
0 answers

Responsive design with media query : screen size?

I'm utilising media queries to create a ...READ MORE

2 days ago in CSS by Edureka
• 9,940 points
8 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP