I have an image background set in in wrapperlp at top of page. It works fine but its width is set at 1000px. I need this image to span across the full width of the screen, but when i change width nothing happens.
css
#wrapperlp {
width: 100%;
margin: auto;
}
#media screen and (max-width: 800px) {
#wrapperlp {
width: 90%;
min-width: 100px;
}
}
#headerlp {
font-size: 30px;
color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#para {
font-size: 20px;
color: white;
text-align: center;
}
#game_img {
height: 250px;
width: auto;
margin-bottom: -30px;
position: relative;
display: inline-block;
float: left;
margin-top:-35px;
padding-top: 5px;
max-width: 100%;
}
#video_play {
position: relative;
display: inline-block;
float: right;
margin-top:-30%;
width:280px;
padding-right:10px;
}
#spacer {
height: 40px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 900px;
padding-top:20px;
}
.reward_img {
padding-left: 45px;
padding-top: 5px;
position: relative;
display: inline-block;
float: left;
}
html
<div id="wrapperlp">
<div style="background-image: url(); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
<div id="headerlp">text</div>
<div id="para">text</div>
<div id="game_img"><</a></div>
</div>
</div>
<div id="video_play">text</div>
<div>
<div id="spacer">
<div style="position: relative; float: left">text</div>
</div>
Besides other answers here, you can also use values cover or contain in background-size:
cover
The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
background-size: cover;
contain
The contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container.
background-size: contain;
source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
If you consider putting img inside of the div. This should do it.
<div style="width:200px; height:200px">
<IMG SRC="URL.PNG" width="100%" height="100%"/>
</div>
To do this as a background image of the div, use
height: 200px;
width:200px;
background-image: URL(image.PNG)
background-size: contain;
In your CSS.
background-image: url('../images/bg.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
Hope its help you
If you need to get the content(image) to the full width of screen,you must set width in percentage;that is 100% of screen
width:100%;
always give max-width in px and width in percentage when using max width
Related
I am trying to adjust my logo at the center of the webpage, but whenever I adjust it in my CSS file, the background is getting affected by the changes so there will be white spaces on top.
.bgimage {
width: 1903px;
height: 1000px;
background-image: url(https://drive.google.com/uc?id=1ZtitWTmH3qglyS7uv4X32GDQv35fmhwG);
background-attachment: fixed;
background-size: cover;
margin-top: 60px;
display: block;
}
.bgimage .ETLOGO {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
width: 40%;
height: 50%
}
<div class="bgimage">
<img src="https://drive.google.com/uc?id=1vXkFqCQzC7sagYCBOuAwDQMf-uhJTmAo" class="ETLOGO">
</div>
Here is a photo of my website.
I think what you wanted was padding at the top of the logo, instead of margin. Try this:
.bgimage {
background-attachment: fixed;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/0f/MOS6581_chtaube061229.jpg);
background-position: center;
background-size: cover;
height: calc(100vh - 50px);
width: 100vw;
}
.bgimage .ETLOGO {
display: block;
height: 50%;
margin: 0 auto;
padding-top: 40px;
}
<div class="bgimage">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/440px-Intel-logo.svg.png" class="ETLOGO">
</div>
my problem :
I have the class .logo working perfecly with this size: width: 316px; height: 300px;
the problem is this logo never will have this size always, the width and height should not be defined, so next logo can fits well.
I tried remove the width and height without no success, when I do this the logo does not appear.
it is something I can do in the css to make this work without set width and height?
https://jsfiddle.net/pLfgam3r/1/
.logo {
background-image: url('https://lh5.ggpht.com/tq3WqEUxtRyBn-d_0t3j6WKNHuJDrmLq-FE3GAYrsAMQFIaS7FIgRLfzzql2SvfvLqto=w300-rw');
background-repeat: no-repeat;
width: 316px;
height: 300px;
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
.logo2 {
background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg');
background-repeat: no-repeat;
width: 316px;
height: 300px;
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
<div class="logo"></div>
<div class="logo2"></div>
Set background-size: contain;
https://jsfiddle.net/wuqvwpkL/1/
I found this post:
Why doesn't the background image show up without specific width and height?
So your css should look like this:
.logo2 {
background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg');
no-repeat: true;
display: block;
position: relative;
width: 316px;
height: 300px;
padding-bottom: 20%;
background-size: 100%;
background-repeat: no-repeat
}
This is working for both logos that has different sizes.
https://jsfiddle.net/pLfgam3r/4/
I have situation. I'm using header full-width image, so width is 100% and height I have fixed to 650px.
I need to position image in the way, that in case I will increase or decrease browser width, background image will only increase or decrease width, and not move image vertically.
I hope I've wroted it understandable. If not enought, here is a screenshot
Current situation
My desired situation
SCSS code
header {
margin-top: 78px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
max-width: calc(100% - 120px);
}
.header-main {
background-image:url(../img/header.jpg);
height: 650px;
margin-left: 60px;
margin-right: 60px;
}
HTML
<header class="header-main" >
---Content---
</header>
Thank you soo much :)
try to change the background-size
header {
margin-top: 78px;
background-repeat: no-repeat;
background-position: center;
background-size: auto 650px;
position: relative;
max-width: calc(100% - 120px);
}
.header-main {
background-image:url(../img/header.jpg);
height: 650px;
margin-left: 60px;
margin-right: 60px;
}
I would like to have like a three columns page where the one in the middle has a dynamic width (window resize) AND a minimum one (div #middle: min-width:400px;).
Problem is that the third column is wrapping when I resize.
I know if I replace the #middle div width:75%; by width:500px; this would work and the right column won't wrap, but I won't have a dynamic width middle column anymore...
How an I solve this?
#contentwraper {
position: relative;
min-width: 800px;
}
#left {
position: relative;
float: left;
background-image: url("http://www.artetics.com/images/artfrontpageslideshow.png");
background-repeat: no-repeat;
background-position: center center;
min-width: 128px;
width: 12%;
height: 128px;
}
#middle {
position: relative;
float: left;
min-width: 400px;
width: 75%;
text-align: center;
}
#right {
position: relative;
float: left;
background-image: url("http://www.emoticonswallpapers.com/avatar/art/Test-Card.jpg");
background-repeat: no-repeat;
background-position: center center;
min-width: 128px;
width: 12%;
height: 128px;
}
.imagemiddle {
position: relative;
float: left;
background-image: url("http://www.tradewindscientific.com/images/t_logo.gif");
background-repeat: no-repeat;
background-position: center center;
width: 25%;
height: 128px;
}
<div id="contentwraper">
<div id="left"></div>
<div id="middle">
<div class="imagemiddle"></div>
<div class="imagemiddle"></div>
<div class="imagemiddle"></div>
<div class="imagemiddle"></div>
</div>
<div id="right"></div>
</div>
If you want the right column to overflow on the right of the document when the page is too large (or the window not enough), the only solution is a table.
Else, try this: 3 columns, middle one with flexible width
You can change #right's behavior by moving it after or before #left; or by setting overflow:hidden on #middle.
http://jsfiddle.net/3UAbN/1/
I have a problem with my site. I want that the shadow stops at the end of my textbox.
HTML
<body>
<div id="shadow" class="floatfix">
<div id="shadowleft"></div>
<div id="shadowtop"><img src="img/shadowcornerleft.png" alt="hoek" id="shadowcornerleft" /><img src="img/shadowcornerright.png" alt="hoek" id="shadowcornerright" /></div>
<div id="shadowright"></div>
<div id="content">
This is my CSS code:
#shadow
{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 974px;
}
#shadowleft
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 42px;
background-image: url("img/shadowleft.png");
background-position: top left;
background-repeat: repeat-y;
}
#shadowright
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 12px;
margin-left: 947px;
background-image: url("img/shadowright.png");
background-position: top right;
background-repeat: repeat-y;
}
#shadowtop
{
width: 892px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
background-image: url("img/shadowtop.png");
background-position: 0 0;
background-repeat: repeat-x;
}
#shadowcornerleft
{
position: relative;
left: -42px;
top: 0;
}
#shadowcornerright
{
position: relative;
left: 850px;
top: 0;
}
#content
{
width: 920px;
margin-left: auto;
margin-right: auto;
background-color: white;
border-bottom: 1px solid #cccccc;
}
I think that I have this problem because of the "height: 100%". But I don't know how to fix it.
There's a much simpler way to do this. Make a new background image 960px wide by 10px high that has your shadow at either side of it. (You may need to tweak the width to get 920px of white in the middle with the shadows down the sides)
Use your #shadow div to add that background around #content eg:
#shadow
{
width: 960px;
margin-left: auto;
margin-right: auto;
background: url(shadow-sides.png) repeat-y left top;
}
Alternatively you can probably make your #content div stretch down by adding min-height: 100%; to it and an IE6 hack:
* html #content { height: 100%; }
100% shadow height has no height to count 100% from so it uses auto mode. So so far I see 3 ways to fix problem and none of them are nice as it should be:
Setting fixed height on parent div (bad if content extends)
Use 3x3 table (but once again people say not to use tables for layout)
Use double sided shadow background image to fill content div. 1px height 974px width bg image with repeat-y; (not very elegant if site width changes)
id say that your HTML is wrong. Its bad practice to have self closing div's
wrap them around your content and use negative margin's and background positions to get the right effect that spans the height of the fluid content
this is a bit sudo, as it ripped from another site of mine, but ti should give you the basic of how it should be done
<div id="header">
<div class="wrapper">
<div class="inner">
...
</div>
</div>
</div>
#header {
height:100%;
background:transparent url(../img/left-gradient.png) repeat-y scroll left center;
margin:0 auto;
max-width:60em;
min-width:40em;
padding-left:7px;
text-align:left;
width:60em;
}
#header .wrapper {
background:transparent url(../img/right-gradient.png) repeat-y scroll right center;
padding-right:7px;
}
#header .inner {
background-color:#FFFFFF;
}