0

i want to to make this portrait img as my cover/intro photo but i want the full size of it, i dont want it to look stretch or what, but when i code it looks stretch. please check my attachment photo below thank you.

HTML code:

<div id="page-wrapper">
    <header id="header">
        <nav id="nav">
            <ul>
                <li class="special">
                    <a href="#menu" class="menuToggle"></a>
                    <div id="menu">
                        <ul>
                            <div class="title">Catalog</div>
                            <div class="sub-title">title</div>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="l">Blog</a></li>
                            <li><a href="">Shop</a></li>
                            <li><a href="#">About</a></li>
                        </ul>
                        <hr>
                        <ul>
                            <div class="title">Links</div>
                            <li><a href="">Instagram</a></li>
                            <li><a href="">Facebook</a></li>
                            <li><a href="">Vimeo</a></li>
                        </ul>
                        <hr>
                        <ul>
                            <div class="title">Partner</div>
                            <li><a href="">sample.com</a></li>
                            <li><a href="">sample.com</a></li>
                            <li><a href="">sample</a></li>
                        </ul>
                        <hr>
                        <ul>
                            <li><a href="index.html">Search</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </header>
    <div class="intro">
        <div id="center">
            <div class="logo">
                <img src="img/Logo/logo.png" />
            </div>
        </div>
    </div>
</div>

,CSS code:

.intro{
  background: url('../img/bbl.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  min-width: 1024px;
  background-attachment: fixed;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

This is the image i want to use,

it looks stretchy etc,

RiesvGeffen
  • 1,539
  • 2
  • 11
  • 29
El Mucho
  • 15
  • 1
  • 9
  • 2
    Please give us your HTML code, so we know where to place your cover. If you can make a demo that would help a lot for us and for you, people will help you way faster. – RiesvGeffen Dec 09 '15 at 08:44
  • The problem is that you have conflicting `background-size` properties in your CSS. `background-size:100% 100%` is the culprit; if you remove this then the rule above it, `background-size:cover` will work. – Mr Lister Dec 09 '15 at 08:45
  • @MrLister but i want the ful height and width of the photo to be fixed – El Mucho Dec 09 '15 at 08:54
  • @ElMucho If you want the background to have its actual size, then don't resize it. Remove all `background-size` properties. – Mr Lister Dec 09 '15 at 08:59
  • @MrLister wait sr, ill show you something and gonna try something thank you! – El Mucho Dec 09 '15 at 09:01
  • On a side note, you have invalid html - `div`s cannot be direct descendants of `ul` – Pete Dec 09 '15 at 09:08

0 Answers0