I am new to HTML/CSS and I am designing a basic web-page. I added a Background Image and showing information on it. But, when I scroll the webpage, the image remains fixed on the starting and when I scroll down, it doesn't show any background. I have attached the image below describing my problem.
This is my page on opening HTML file
And this is my page on scrolling down
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | HOME
</title>
</head>
<style>
h2
{
color: yellow;
font-family: courier;
}
body
{
position: absolute;
top = 0;
bottom = 0;
left = 0;
right = 0;
background-image:url("tomb_raider_definitive_edition.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.noselect /* Disable Copy Text */
{
-moz-user-select:none; /* Mozila FireFox */
-ms-user-select: none; /* Internet Explorer */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
}
</style>
<body>
<span style="color:red"></span>
<h2 class="noselect; h2">TOMB_RIDER (2013)</h3>
<pre class="noselect">
<!-- Some Info here -->
</pre>
<p class="noselect" style="font-family: verdana;"><strong>TOMB_RIDER</strong></p>
<a href="https://upload.wikimedia.org/wikipedia/en/f/f1/TombRaider2013.jpg">
<img src="TombRaider2013.jpg">
</a>
<table border="1px"; style="border-style:solid;" class="noselect">
<!-- Table code-->
</table>
<h2 class="noselect">Requerment !</h2>
</body>
</html>
What I want is that the background image should remain fixed and only the content should be scrolled.
I also tried position: relative; and position: fixed;, but none of them is working. I also searched on SO and W3Schools before asking it, but I couldn't find solution to my problem.
Any kind of help would be appreciated. Thank you.
According to W3schools
background-attachment: scroll|fixed|local|initial|inherit;
Check this property this will solve your problem..
Here the value fixed is used to fix the background with regard to the viewport.
You can edit your code like this-
body
{
background-attachment: fixed;
position: absolute;
top = 0;
bottom = 0;
left = 0;
right = 0;
background-image:url("tomb_raider_definitive_edition.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Hope this helps.
Give this a try
body
{
position: absolute;
top = 0;
bottom = 0;
left = 0;
right = 0;
background-image:url("tomb_raider_definitive_edition.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Try using background-attachment: fixed; as this will attach the background image to the viewport.
Related
I have a fixed navbar and the site's background changes with sections (the sections background is diagonal). Now I want the background color of the navbar to change with the background of the underlying section's background color, without just setting the navbar's background color to the same color but the navbar to be transparent to the background but not it's content, like this:
example of how it should like
and not like that:
example of how it should NOT look like
I'm super thankful for any idea or approach on how to achieve something!
If you want to keep the navbar on top all the time, change position to fixed and change set z-index to a high value so it is on top of all other elements, you may use the following CSS class for navbar. Of course, you can set the background-color and opacity to the values that match your background.
.myNavBar {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
}
Without sharing some codes on how you are achieving the undesired results it might be hard to help you out.
Try this and it would work, I guess.
Within the container for the navbar, set the z-index in the CSS to a very high number, say 1999. This would make sure the navbar remains on top of other elements, assuming no other element has been set to have a z-index greater than 1999, in this case.
.navbar-container {
z-index: 1999;
}
Fading Content using Iframes (No JavaScript)
You will need to create an Iframe tag with the src attribute set to the content file you want to fade. The main content has to have separate styles. The iframe must be in focus to allow scrolling. More details are in the code below.
Demo: https://fadingiframe.netlify.app/
/* Index.html style style-sheet below */
iframe {
position: absolute;
top: 5rem;
width: 100vw;
height: calc(100vh - 6rem);
border: none;
-webkit-mask-image: linear-gradient( /* Mask iframe */
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
mask-image: linear-gradient(
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
}
/* mainContent.html style style-sheet below */
body {
position: absolute;
overflow-x: hidden;
margin-top: 2rem;
color: aliceblue;
width: 80vw;
left: 5vw;
}
body::-webkit-scrollbar { /* Remove scroll bar */
display: none;
}
body {
-ms-overflow-style: none; /* keep in mind that it will only scroll if the iframe is in focus */
scrollbar-width: none;
}
p {
padding: 2rem;
font-size: 2rem;
}
<body>
<nav></nav>
<iframe id="main-content-iframe" src="mainContent.html"></iframe>
<!-- Add iframe and src to main content html file -->
<canvas id="canvas1"></canvas>
<footer></footer>
</body>
<!-- Separate html file in root directory -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./mainContent.css" /> <!-- Link to css file -->
</head>
<body>
<section>
<!-- Your Content here-->
</section>
</body>
</html>
-------------------------------------------------------------------------
For Text only -
Body Tag Has Special/Hide Properties
I think your issue is that you do not use the "body" element selector. It has unique properties that set the body element height to match the screen by default. Although it still allows scrolling the inner content. I add an extra background div for the text as well. It provides a better reading experience. Please have a look at my solution. It may help you solve your problem. If you have any questions, don't hesitate to ask.
Demo : https://jsfiddle.net/hexzero/5yjqk43a/
body {
background-image: black;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
color: #fff;
}
section {
position: absolute;
padding: 3rem 25%;
background-image: Linear-gradient(
transparent 6rem, <-- Should be the same as nav Height
#fff 30%, <-- Can set this to nav Height for abrupt cut-off
#fff 70%,
transparent 90%
);
-webkit-background-clip: text;
background-clip: text;
background-attachment: fixed;
scroll-behavior: auto;
z-index: 3;
}
nav {
background: rgba(0, 0, 0, 0.616);
width: 100%;
position: fixed;
top: 0;
height: 6rem; <-- Navigation Height
z-index: 4;
}
section > p {
margin-top: 12rem;
color: transparent;
}
.text-background { <-- Remove this style section to have no background for the content,
width: 60%; <-- along side the <div class="text-background"></div> element
height: 100vh;
right: 20%;
position: fixed;
top: 0;
background-image: Linear-gradient(
transparent 6rem, <-- Background to nav height
rgba(102, 51, 153, 0.924) 20%,
rgba(102, 51, 153, 0.931) 90%,
transparent 100%
);
z-index: 0;
}
canvas {
width: 100%;
background-color: rebeccapurple;
position: fixed;
top: 0;
z-index: -1;
}
footer {
position: fixed;
width: 100%;
height: 1rem;
background: rebeccapurple;
z-index: 1;
bottom: 0;
}
p {
font-size: 2rem;
}
Let me know if you would be interested in a JavaScript version for better browsers support. Thanks
1st of all this is about the mobile version of a site
My goal is to take an image clip it in it's center and make it free for the user to move left and right as he pleases
I believe I am the wrong foot and clip value shouldn't be used don't take my code and try to fix it may be completely wrong
I have an idea to hide the image left and right somehow but I don't know how to implement it
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.center-cropped {
width: 500px;
height: 800px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}
</style>
</head>
<body>
<script>
</script>
<div class="center-cropped" style="background-image: url('office.gif');">
<img src="http://placehold.it/400x400" />
</div>
</body>
</html>
I have a problem I need to put a background image to the body of my page but that this is responsive and suits any size .. this I should do only with css or also javascript, could give an example please
For the HTML:
<body class="background">
<!-- Content goes here -->
</body>
For the CSS:
.background {
background-image: url(image.png);
background-size: cover;
position: fixed;
}
Tell me how it goes!
For the CSS
.body {
background-image: url('myImg.jpeg');
background-position:center top; // you can change this as you like.
background-repeat:no-repeat;
-moz-background-size:cover;
background-size:cover;
height: 100%;
width:100%;
}
Add -moz-background-size for Firefox Browser.
I am using Vide to play a video in the background.
Here is the playing div tag.
<div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
when i change the style to
width: 100%; height: 100%;
The video disappears from the page. I want that video covers all page and I can scroll down.
Why does it happen?
How can I fix it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Body background example</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="video/ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.vide.js"></script>
</body>
</html>
This is fine just put scroll bar or use some jquery for scroll purpose.
if you want to cover all with the div and adjusted depending on the size of the screen, this is the code (Important, this is directive to the div):
style="
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
background-size: cover;
background-image: none;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;"
if you want in the body, in the folder examples/body-bg.html is the examples for apply to the body only: https://github.com/VodkaBears/Vide/tree/master/examples
You are using the wrong units of measurement. If you pull the image in via CSS image-background then you can set the image-background-size to the contain property. It will insure that the video completely fits into it container (body, div, span, etc.).
body{
background-image:url(''your-video.mp4');
background-repeat:no-repeat;
image-background-size: contain;
}
Source: w3schools CSS3 background-size Property
You could also try using the height and width but use the vh and vw metrics. It sets the height and width based on the view ports dimensions.
Source: CSS Units
I'm basically a phone developer and have no knowledge about web programming. What I'm trying to do is loading an image with any width and height in a browser control of my mobile app with a fixed width (say 400px) and a growing height. that image should fill the browser control completely without any free spaces.
<script type="text/javascript">
window.onload = function () {
var elem = document.getElementById('content');
window.external.Notify(elem.scrollHeight + '');
}
</script>
<div id="content">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<img src="http://www.reactiongifs.com/r/iwsyih.gif" />
</div>
this, doesn't fill the page with image, and also its width is not 400. thanks.
you can some styling to your code :
<style>
image{
position: absolute;
height :100%
width: 100%;
}
</style>
I am not sure what you mean by browser control.
One way is to use and size a div element via CSS and set its background image via CSS property.
<div style=' /* more CSS */ background-image:url("foo.png");'></div>
For example see http://www.w3schools.com/css/css_background.asp
I'm guessing that by browser control you mean the window area. If so, you can set a background-image for the <body> tag and make it fill the whole area thanks to background-size: cover:
body {
background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* IE8 and older hack */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
This is a new CSS3 feature, so you have to use browser specific prefixes (webkit, moz and o). The solution doesn't work in IE8 and older, so you need to add the filter hack (see the code).
HERE'S the full article about this method.
As the article explains, it can be unsafe to use the mentioned filter methods for IE due to possible scrollbar, and link issues. If you'll experience the problem you can resolve it by applying the background not to <body> tag but to some <div> which you will spread for 100% width and height. In that case you must remember to add 100% width and height also for html and body:
html, body {
width: 100%;
height: 100%;
}
#bg-image {
width: 100%;
height: 100%;
/* additional styles to let the div serve as a background, not spoiling the layout */
position: absolute;
z-index: -1;
background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* IE8 and older hack */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
Example HTML:
<html>
<head>
(...)
</head>
<body>
<div id="bg-image"></div>
(...)
</body>
</html>
I believe that what you are trying to do is more suited to a CSS solution... below I have added the code that should solve your problem. Keep in mind that setting a fixed width but changing height is not the best idea as the image can become distorted. Regardless, I have included the css for setting a background image to cover your content container. Here is the full code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<style>
/* # represents an id */
#content{
max-width: 400px; /* this is your restricted width that you are desiring */
width: 100%; /* if you want the image to cover the whole screen regardless of the device */
height: 100%;
background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div id="content">
<img src="http://www.reactiongifs.com/r/iwsyih.gif" />
</div>
<script type="text/javascript">
window.onload = function () {
var elem =
document.getElementById('content');
window.external.Notify(elem.scrollHeight + '');
}
</script>
<body>
</html>
As you might have noticed I added and tags to your code, without these your code will not behave as expected. You should be able to copy and past this code. Hope it helps :).