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, 2022 in HTML by Abhinaya
• 1,160 points
1,279 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, 2022 by Deepak
• 980 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, 2022 in HTML by Rahul
• 9,680 points
1,211 views
0 votes
0 answers

Responsive image map

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

Jun 3, 2022 in HTML by Tejashwini
• 3,820 points
474 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,880 points
5,983 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, 2022 in HTML by Tejashwini
• 3,820 points
607 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, 2022 in HTML by Tejashwini
• 3,820 points
991 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, 2022 in HTML by Tejashwini
• 3,820 points
691 views
0 votes
0 answers

Responsive css background images

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

Jul 8, 2022 in CSS by Edureka
• 13,620 points
385 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, 2022 in CSS by Edureka
• 13,620 points
1,166 views
0 votes
1 answer

Common CSS Media Queries Break Points

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

answered Aug 8, 2022 in CSS by Tanishqa
• 1,170 points
1,157 views
0 votes
0 answers

Responsive design with media query : screen size?

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

Aug 12, 2022 in CSS by Edureka
• 13,620 points
574 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP