Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm not an html/css guy but the guy who usually does this quit so it fell into my lap.
I have a page where there is a background image to fill the entire page. I found some sample css online to do this:
html {
background: url(background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
What I want to do now is overlay some text on this such that it appears at the centered at the bottom of the page (not right at the bottom, maybe 50 px up from bottom). I tried a bunch of things but can't seem to get it quite right.
Depending on what your goal is you can use a combination of position: absolute and set the bottom and left attribute, like so:
body {
background: skyblue;
}
.footer-text {
display: block; /* just so IE will correctly render it */
position: absolute;
z-index: 1000;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
}
<footer class="footer-text">footer text</footer>
html:
<body>
<div class="bottomme">
<p>I'm some text at the bottom of the page</p>
</div>
</body>
css:
html
{
background: url(https://astrobioloblog.files.wordpress.com/2011/10/duck-1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
font-size:16px;
}
body
{
width:100%;
height:100vh;
margin:0;
border:1px solid red;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.bottomme
{
font-size:3rem;
line-height:1.25em;
color:white;
text-align:center;
margin-bottom:1em;
border:1px solid blue;
}
background-position: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
push div to bottom of page: https://codepen.io/carolmckayau/pen/bmaOyK
Without knowing the code, my suggestion would be to add the text in it's own tag (e.g. a p-tag <p>your text here</p> ) and then position the text with
position: absolute;
bottom: 50%; /* Depending on how low/high you want the text */
left: 50%;
transform: translate(-50%, -50%);
W3schools.com has a great example on this right here: https://www.w3schools.com/howto/howto_css_image_text.asp
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 3 years ago.
Hi I have <div class="jumbotron text-center"><nav>something</nav></div> this line of code and the jumbotron has some CSS effects something like
.jumbotron{
background: url("image-url") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-size: cover;
height: 78vh;
filter: brightness(50%);
}
but all I want is only the jumbotron's background image gets the CSS effects, not the nav tag. currently, the nav tag inherits thefilter: brigtness (50%), is there anyway only the background-image gets the effect?
No, it's not possible. A filter will affect current element with all its contents (including children).
Therefore the way to go here is to move <nav> outside of .jumbotron, wrap them in a common relative parent and render <nav> above .jumbotron.
Proof of concept:
.relative {
position: relative;
}
.relative > .absolute {
position: absolute;
width: 100%;
top: 0;
/* making it visible */
background-color: rgba(255,255,255,.25);
border-bottom: 1px solid white;
color: white;
padding: 1rem;
box-sizing: border-box;
}
.jumbotron{
background: url("https://picsum.photos/id/237/1024/540") no-repeat center center /cover;
height: 78vh;
filter: brightness(50%);
}
<div class="relative">
<div class="jumbotron"></div>
<nav class="absolute">something</nav>
</div>
Feel free to rename the classes and adjust to your particular needs.
.jumbotron{
width:100%;
height:50vh;
background: url('longboard.jpeg');
color:white;
}
I'm trying to build a "jumbotron" from scratch. Currently the html for it is just a with nothing in it. As of right now the picture simply cuts off on the right side while my navbar scales downward. i would like the background picture to also shrink with it. How do I go about doing this?
Also whenever I add a or anythign to the div a margin appears above my navbar which I didn't thing was connected. Sorry in advance if i broke any posting etiquette, this is my first post on here.
Maybe try this:
.jumbotron {
background: url('longboard.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 50vh;
width: 100%;
overflow: hidden;
color: white;
}
Resource - https://css-tricks.com/perfect-full-page-background-image/
The simplest way is to set the background size to "cover"
.jumbotron {
background-image: url('longboard.jpeg');
background-size: cover;
height:50vh;
color:white;
}
I am testing out the parallax scrolling effect, in which there is a background picture and by scrolling, you can see different parts of the picture. The problem is, when I zoom out the page, the picture repeats, which is ugly. I have tried no-repeat; and it only makes the picture stay in one corner, and I have tried background-size: cover; which makes the page scrollable to sides which I don't need.
How to deal with this?
EDIT: I'm sorry for forgetting to post the code.
HTML & CSS:
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
}
.parallax-inner{
padding-top: 10%;
padding-bottom: 10%;
}
<section class="parallax">
<div class="parallax-inner">
<h2>My First Heading</h2>
</div>
</section>
Example: http://prntscr.com/9jv8d4
Zoomed out: http://prntscr.com/9jv8sd
No-repeat; http://prntscr.com/9jv94p
Cover and on 1920x1080 screen, default 100% zoom; http://prntscr.com/9jv9ur (page is scrollable to the far right side)
try to change your css code to be as following:
body {
margin: 0;
}
.parallax {
background: url(latest-space-wallpaper_110926700_30.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.parallax-inner{
padding-top: 10%;
padding-bottom: 10%;
}
i tested it on my own and works fine, hope this will help you.
resource will be useful for you:
https://css-tricks.com/perfect-full-page-background-image/
just use
body{
margin: 0;
padding:0;
}
I set the body to:
body { background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;}
and it displays my background but when i set this code:
body {
z-index: -1;
background: #425b77; }
#myBody {
background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;
}
it just would not display the background and instead just displaying the color i set on the body tag.
Any idea how to solve this?
Edit:
When i look at this code on another webpage i have it works correctly and i have written the exakt same thing.
This is my result from code at the second line:
https://www.dropbox.com/s/ioo1cnfszdzh0wu/Skärmavbild%202014-03-07%20kl.%2018.44.33.png?m=
This is the result i get from the code at line 8 and downwards:
http://www.dropbox.com/s/d8wjnwt346gzdv3/Skärmavbild%202014-03-07%20kl.%2018.44.02.png?m=
Edit:
If i add content inside the <div id="myBody"></div> then it will be blurred too because i want a blur filter on it.
try this :
body {
background: #425b77; }
#myBody {
background:url(your picture) no-repeat center center scroll;
background-size: cover;
-moz-background-size: cover;
width:50%; height:50%;
display:block;
position:fixed;
z-index:1001;
}
this is just example... change position width and height as you wish
You forgot to add Height and Width (or add the content do that div).
I have one div overlaying another div as follows:
div.container {
position: relative;
min-height: 100%;
margin:0;
padding:0;
background:url('http://www.scratchprogramming.org/img/book.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 62% 70%;
overflow:hidden;
}
div.content {
position: absolute;
min-height: 100%;
margin:0;
padding:0;
top: 0;
left: 0;
width:100%;
z-index:10;
overflow:hidden;
}
My html starts out like this:
<div class="container">
<p id="catImage">
<img src="img/Scratchcat.png" alt="cat" />
</p>
</div><!--container-->
<div class="content">
Now I had to set the height on the cat image really long so that the background image in the container (book.png) will fill the content area.
The problem is when testing on different browsers... somtimes the book.png background goes over the content length, leaving a couple of inches extra on the bottom.
Is there any way I can make the content and container height the same using css and not having to play around with the image height ?
Here is the working example: http://www.scratchprogramming.org
I came up with a solution very similar to this:
How to make one div's height depended of another div's height?
Thanks, everyone.
Try this:
body {
background: url('http://www.scratchprogramming.org/img/book.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.scratchprogramming.org/img/book.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.scratchprogramming.org/img/book.png', sizingMethod='scale')";
}