i want position my background image in the bottom right of my page :
.bg{
background-image: url("Wave.png");
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 85%;
background-position: bottom 0px right 0px;
background-origin: content-box;
}
The bg class is the global container of my html
<body class="background">
<div class="bg">
</div>
</div
when there is not much content in the page i have no problem it is displayed correctly
but when there is more rows in my table i have this problem
any ideas please i can't figure out what's wrong ?
Try this:
.bg{
background: url("Wave.png") no-repeat;
width: 100%;
height: 100%;
position: absolute;
right: 0;
bottom: 0;
background-attachment: fixed;
overflow-y: scroll;
background-size: contain;
background-position: bottom;
}
EDIT:
<body>
<div class="bg">
<div>
...
</div>
</div>
</body>
Some explanations:
Setting background-attachment: fixed makes the background fixed on the page when you scroll.
The content should then be restricted within the div by setting overflow-y: scroll; so that, in your case where you have a table that can be longer than the div, the table will be constrained inside the div with scrolling enabled, and it won't extend outside the div.
background-position: bottom is also enough.
I notice the closing tag for your body element is a </div that is not enclosed properly. You should change the </div to </body>. If you already closed the body in your full code, you can remove the unnecessary </div
Try this
.bg{
background-image: url("Wave.png");
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-origin: content-box;
}
Related
I'm attempting to set this image as the background of the page, and for whatever reason it just won't work. The intention is to make the background image cover the page, without cropping vertically or horizontally.
Note: The CSS file is connected to the document.
HTML:
<body>
<main>
<h2 id="cityName">
</h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
</main>
</body>
CSS:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-repeat: no-repeat;
-webkit-background-size: cover fixed;
-moz-background-size: cover fixed;
-o-background-size: cover fixed;
background-size: cover fixed;
}
Hope this will work for you:
body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
background-attachment: fixed;
}
<main>
<h2 id="cityName">
</h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
</main>
You should try background-size: Cover; may be an image will be cut from right or bottom but with background-size: 100% 100%; image can stretch. It totally depends on image size.
please do not use this css attribute "background-repeat: no-repeat;" if you want full screen image.
Actually you can solve this issue in two ways.
1.use the fullimage and repeat the image if size of the screen is large
2. stretching the image to the full width.
please look at the below code:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
<h2 id="cityName"></h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
another meathod is below here.
body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
}
<h2 id="cityName"></h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
I am currently positioning a background image that is small in height but large in width to stretch all the way across the browser. I am only able to achieve this when I do background size cover, but not when I set a certain size to the image other than cover. I tried background repeat-x but that does not seem to work either.
<html>
<body>
<div class="background">
<div class=“header”></div>
//some content
</div>
<footer><footer/>
</body>
</html>
CSS
.background {
background-image: url(some image);
background-size: //tried cover and it works but not when I set it to width 100% or something like 2800px
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
Just add background-size: cover code in css will resolve the issue.
.background {
background-image: url(some image);
background-size: cover;
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
It is working with background-size:100%;
.background {
background-image: url("marakele-elephant1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;
}
html, body{
height: 100%;
}
body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
div, body{
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
<div class="wrapper">
<div class="message"></div>
</div>
Not very related to this question but I hope this answer will save someone's time
For the people who are using bootstrap. Keep the image inside a container, check again if it is inside class="container", I had a typo, I wrote classs instead of class and the background image wouldn't fit.
Second, close previous divs.
Third, if you don't use container and start with just <div class='row'></div>, background image won't fit.
Working Example:
<div class="container" style="background-image: url('img'); background-size: cover;">
<div class="row">
</div>
</div>
I'm curious if the CSS unit vw (view width) will accomplish what you are trying to do with width: 100%
Instead of width: 100%, try width: 100vw
https://www.w3schools.com/cssref/css_units.asp
I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>
Right now my background image adapts to the screen size. The problem is, when the screen shrinks too much (e.g. mobile) the background image is no longer long enough to fill the div vertically.
So what I did was to assign a value to width instead of using 100%:
#content {
width: 2000px;
}
The problem is, the div is no longer responsive, since it has a fixed width.
How to solve this dilemma?
Here's the relevant code:
HTML:
<div id="content">
<div class="container clearfix">
</div>
</div>
CSS:
.container {
position: relative;
margin: 0 auto;
width: 960px;
}
#content {
background: url(images/bg.jpg) repeat 0 0;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-attachment: scroll;
background-position: 50% 0;
position: relative;
width: 100%;
height: 750px;
}
#content .container {
height: 750px;
}
And the live site: http://www.m2comm-semi.com/
These two rules
background-size: cover;
background-position: center; /* bottom, top, etc */
should make your background image work properly on every resolution as long as it is big enough to cover f.e. 1900x1200, just give it a shot and let me know if the result is satisfying, bro.
I have an image that I am showing on a page. Here is my css:
body {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
When I do this, everything shows just fine. I then try to show the same image in a div. Here is my html:
<body>
<div class="background-image"></div>
</body>
And here is my new css:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
But now nothing shows. I look in my network tab and I see that the image is available, but it is not showing on the page. What am I doing wrong?
It's because the div is 0 pixels tall, give it some height, for example:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: 100vh;
}
Since you are only using background you need to set a height/width on the div itself.
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: */Your Value/*;
}
I would suggest remove background-size: 100%; .. instead add height and width as 100%.
body {
background: url(./../imgs/beach.png) no-repeat;
height: 100%;
width: 100%;
}