CODEWITHSUNDEEP
cssreactjsresponsive
Tim Griffith
Tim Griffith

Reputation: 162

Why is header image not responsive?

Trying to figure out why the header image for my site is non-responsive.

From what I've read, this should do it with a width of 100% on the containing element.

https://super-lollipop-a72757.netlify.app/

.intro {
  display: table;
  width: 100%;
  padding: 0;
  background: url(../img/big_logo.jpg) center center no-repeat fixed;
  background-color: #e5e5e5;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

Header component

import logo from '../images/logo2.png';

export const Header = (props) => {
  return (
    <header id='header'>
      <div className='intro'>
        <div className='overlay'>
          <div className='container'>
            <div className='row'>
              <div className='col-md-8 col-md-offset-2 intro-text'>
                <h1>
                  {/* {props.data ? props.data.title : 'Loading'} */}
                  <img style={{marginBottom:"20px"}} src={logo} alt="logo" />
                  <span></span>
                </h1>
                <p>{props.data ? props.data.paragraph : 'Loading'}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}

It works fine with images I've tested from the gallery too. But, for some reason when adding the logo as the header image, it doesn't work right.

Upvotes: 0

Views: 312

Answers (2)

Bumhan Yu
Bumhan Yu

Reputation: 2297

background-size: contain vs cover

As Chris Coyier summarized here, background-size can provide various options, and cover might not be you're looking for here.

cover is focused on ensuring there's no space uncovered—practically extending the background image to all four edges beyond the containing boundaries. contain, on the other hand, is focused on ensuring there's no cropping happening on the background image—practically leaving uncovered areas blank.

If you intend your big image to remain intact, uncropped, and readable at all times, try adding the following to your .intro class.

background-size: contain;
background-color: #426CB4;

You already have your background-position: center as part of your background shorthand, so this should cover it. background-color line helps to fill the container with the same color as the logo background.

Upvotes: 1

Shenal Akalanka
Shenal Akalanka

Reputation: 84

Try adding this code to your intro element in CSS file. This will fix your problem.

  display: flex;
  background: url(../img/big_logo.jpg) center center no-repeat center;
background-attachment: fixed;
 height: 100vh;
  background-size: cover;

Upvotes: 0

Related Questions