here is my html:
<div id="banner" style="background-image: url("img/banner.jpg")">
<img src="img/logo.png" alt="logo" />
</div>
and this is my css:
#banner {
width: auto;
height: 100vw;
background: url("/img/banner.jpg");
I want the banner.jpg to be the background of that div with full viewport fill... what to do?
Add the following CSS code:
#banner{
width: %100;
}
This is how I would achieve the effect https://jsfiddle.net/d5Lptwut/10/
<div id="banner">
<img src="img/logo.png" alt="logo" />
</div>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#banner {
background: url('/img/banner.jpg') no-repeat center center;
height: 100%;
width: 100%;
background-size: cover;
}
Related
I have a question. I need to change the image size on hover without changing the parent div's size. Also, I have some tags inside the same div with the image. When I add hover on image and give some pxs to width and height, the tags move with the image.
img {
width: 200px;
height: 200px;
}
img:hover {
width: 250px;
height: 250px;
overflow: hidden;
}
<div class="product-items">
<div class="desc">
<img src="https://cdn.vox-cdn.com/thumbor/v97OD-MBgNjw8p5crApucVs9RB8=/0x0:2050x1367/1800x1800/filters:focal(1025x684:1026x685)/cdn.vox-cdn.com/uploads/chorus_asset/file/22022572/bfarsace_201106_4269_012.0.jpg" alt="">
<div class="cost">
<p class="your_product">Ваш товар</p>
<p>$89.00</p>
</div>
</div>
</div>
You don't need to alter your HTML - just scale the img on hover rather than alter its width and height. Scaling will not affect the positioning of other elements as the scaled element keeps its original size as far as they are concerned.
img {
width: 200px;
height: 200px;
}
img:hover {
/*width: 250px;
height: 250px;*/
transform: scale(1.25);/* added */
overflow: hidden;
}
<div class="product-items">
<div class="desc">
<img src="https://cdn.vox-cdn.com/thumbor/v97OD-MBgNjw8p5crApucVs9RB8=/0x0:2050x1367/1800x1800/filters:focal(1025x684:1026x685)/cdn.vox-cdn.com/uploads/chorus_asset/file/22022572/bfarsace_201106_4269_012.0.jpg" alt="">
<div class="cost">
<p class="your_product">Ваш товар</p>
<p>$89.00</p>
</div>
</div>
</div>
you can do this by using the transform property
.product-items{
width: 200px;
height: 200px;
}
.img-div{
height: 100px;
width: 100%;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
transition: 0.4s;
}
div:hover img {
transform: scale(1.2,1.2);
}
<div class="product-items">
<div class="desc">
<div class="img-div">
<img
src="https://cdn.vox-cdn.com/thumbor/v97OD-MBgNjw8p5crApucVs9RB8=/0x0:2050x1367/1800x1800/filters:focal(1025x684:1026x685)/cdn.vox-cdn.com/uploads/chorus_asset/file/22022572/bfarsace_201106_4269_012.0.jpg"
alt=""
/>
</div>
<div class="cost">
<p class="your_product">Ваш товар</p>
<p>$89.00</p>
</div>
</div>
</div>
You can try add container on image and set position:relative and for img position:absolute
.img-container {
width: 200px;
height: 200px;
position: relative;
}
img {
width: 100%;
height: 100%;
position: absolute;
}
img:hover {
width: 250px;
height: 250px;
overflow: hidden;
}
<div class="product-items">
<div class="desc">
<div class="img-container">
<img src="https://cdn.vox-cdn.com/thumbor/v97OD-MBgNjw8p5crApucVs9RB8=/0x0:2050x1367/1800x1800/filters:focal(1025x684:1026x685)/cdn.vox-cdn.com/uploads/chorus_asset/file/22022572/bfarsace_201106_4269_012.0.jpg" alt="">
</div>
<div class="cost">
<p class="your_product">Ваш товар</p>
<p>$89.00</p>
</div>
</div>
</div>
So i have a footer containing 8 images (4 buttons and 4 icons) the idea is to display each of the 4 icons over the respective button. If I use position:relative , they are just displayed one near the other, so 8 images separated, while it has to look like there are only 4 images.
This is what I want to get:
This is what I get instead:
My css:
.absolute {
position: absolute;
}
#footer {
position: fixed;
bottom: 0;
width: 90%;
height: 10%;
-webkit-transform: translate(-50%, -50%);
left: 50%;
display: flex;
justify-content: space-between;
}
#footer img {
height: 100%;
}
my html:
<div id="footer">
<img class="absolute" src="img/back.png" />
<img src="img/empty_circle_button.png" />
<img class="absolute" src="img/gems_btn.png" />
<img src="img/empty_circle_button.png" />
<img class="absolute" src="img/up.png" />
<img src="img/empty_circle_button.png" />
<img class="absolute" src="img/missions.png" />
<img src="img/empty_circle_button.png" />
</div>
I also need this to be valid in a webview. Any suggestion on what's wrong here?
Ok I found the solution by myself:
HTML:
<div id="footer">
<div><img src="img/back.png" /></div>
<div><img src="img/gems_btn.png" /></div>
<div><img src="img/up.png" /></div>
<div><img src="img/missions.png" /></div>
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
width: 90%;
height: 10%;
-webkit-transform: translate(-50%, -50%);
left: 50%;
display: flex;
justify-content: space-between;
}
#footer div {
background-image: url(../img/empty_circle_button.png);
background-size: contain;
height: 100%;
background-repeat: no-repeat;
}
#footer div img {
height: 100%;
}
I am trying to align three images in a header div. I need one image on the left - once centered - and an image on the right. I have the image on the left and the centered image in place. However, I cannot get the image I need on the right to display on the right of the centered image. If I float:left the centered image it messes up my centered image in various browsers. The image I want on the right displays on the left of the centered image. How do I get it on the right side of the centered image? Thank you very much.
Here is my code:
HTML:
<div class="header">
<div class="headerLeft">
<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerLeft-->
<div class="headerCenter">
<img src="logo85.jpg"
width="485"
height="93"
alt="Salvation Army" />
</div> <!-- closing tag of headerCenter -->
<div class="headerRight">
<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerRight -->
</div> <!-- closing tag of header -->
CSS:
.header{
width: 100%;
height: 115px;
background-color: #0B0B3B;
margin-bottom: -15px;
}
.headerLeft{
float: left;
width: 105px;
height: 115px;
}
.headerCenter{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 485px;
height: 93px;
}
.headerRight{
float: left;
text-align: right;
margin-left: 15px;
width: 105px;
height: 115px;
}
Quick answer :
*
{
box-sizing: border-box;
}
header
{
background: grey;
color: white;
padding: 1em;
position: relative;
height: 5em;
width: 100;
}
img
{
display: block;
height: 3em;
margin: auto;
}
img.right
{
position: absolute;
right: 1em;
top: 1em;
}
img.left
{
left: 1em;
position: absolute;
top: 1em;
}
<header>
<img src="http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif" alt="" class="left" />
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRBzTbPH8FRYR0HRqTmXnwSO4GgLbFO6rpALpwynKRr4SM_nTCywQQO6qvDcg" alt="" class="center" />
<img src="https://c2.staticflickr.com/4/3016/3071708735_ddaf5d361b.jpg" alt="" class="right" />
</header>
To avoid using position: absolute;, I'd recommend using calc to help out, and wrapping the .headerCenter in .headerCenterWrapper as I have below.
CSS:
.headerLeft {
width: 105px;
height: 115px;
display: inline-block;
}
.headerCenterWrapper {
width: calc(100% - 220px); /* Using a number slightly more than the sum of the side images' widths (210 px) to be safe */
height: 115px;
display: inline-block;
text-align: center;
}
.headerCenter {
width: 50px;
height: 115px;
display: inline-block;
}
.headerRight {
width: 105px;
height: 115px;
display: inline-block;
}
And the HTML:
<header class="header">
<img src="" alt="" class="headerLeft"/>
<div class="headerCenterWrapper">
<img src="" alt="" class="headerCenter" />
</div>
<img src="" alt="" class="headerRight" />
</header>
css
.headerLeft{
float: left;
width: 33.33%;
height: 115px;
}
.headerCenter{
margin-left: auto;
margin-right: auto;
width: 33.33%;
height: 115px;
float:left;
text-align:center;
}
.headerRight{
float: right;
width: 33.33%;
height: 115px;
text-align:right;
}
html
<div class="header">
<div class="headerLeft">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerLeft-->
<div class="headerCenter">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army" />
</div> <!-- closing tag of headerCenter -->
<div class="headerRight">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerRight -->
</div>
I have a problem. This is my code:
<body>
<div class="imerologio">
<div id="imerologio-mistika">
<img src="#">
</div>
<div id="imerologio-xarti">
<img src="#">
</div>
</div>
And my css is:
.imerologio{
display: inline-block;
width: 100%;
}
#imerologio-mistika{
background: url("../images/imerologio/mistika.png") no-repeat;
float:left;
}
#imerologio-xarti{
background: url("../images/imerologio/xarti.png") no-repeat;
float:left;
}
I wand to center the inside divs, but i can't. Any help?
You have to remove floats, set display: inline-block to items and text-align: center to container.
.imerologio {
text-align: center;
width: 100%;
}
#imerologio-mistika {
background: url("../images/imerologio/mistika.png") no-repeat;
display: inline-block;
width: 50%;
}
#imerologio-xarti {
background: url("../images/imerologio/xarti.png") no-repeat;
display: inline-block;
width: 50%;
}
<div class="imerologio">
<div id="imerologio-mistika">
<a href="foo">
<img src="#">
</a>
</div><!--
--><div id="imerologio-xarti">
<a href="foo">
<img src="#">
</a>
</div>
</div>
CSS
#container {
width: 1000px;
margin: 0 auto;
background-color: #000000;
}
#header {
width: 884px;
height: 300px;
position: relative;
margin: auto;
background-image: url(babygoatbooksbanner.png); text-align:center;
background-repeat: no-repeat;
}
HTML
<body>
<div id="container">
<div id="header"></div>
<div id="headertoo"></div>
<div id="leftnav"> dude wheres my car</div>
<div id="body"></div>
</div>
</body>
Do you mean the background-image?
Try this:
background: url(babygoatbooksbanner.png) scroll no-repeat center transparent;