Hi there I am trying to make and image on top of another in 1 tag.
Basically I want an image to be the banner on top, so repeat-x
then under it I want the background image repeated multiple times
So something like this
body
{
background:url(banner.jpg); repeat: repeat-x;
background:url(background.jpg);
}
not 100% sure how to do it...I think that explains how I would like it.
I may also want something on the bottom added later so like after that background is done I would want something like background:url(footer.jpg) repeat: repeat-x; bottom
Im thinking this is what youre after.
http://jsfiddle.net/wpqDy/
html {
height: 100%;
width: 100%;
background: url("bg.jpg") repeat 0px 3px;
}
body {
background: url("bg_top.jpg") repeat-x top left;
height: 100%;
width: 100%;
}
You'll need to put background images on two different containers. Perhaps something like this:
<body>
<div id="page">
<div id="content">
...
</div>
</div>
</body>
#page
{
background:url(background.jpg);
}
#content
{
background:url(banner.jpg); repeat: repeat x;
}
CSS3 has support for multiple backgrounds on a single element; this is relatively widely supported, except for IE <= 8. You can write the following:
body
{
background-image: url(banner.jpg), url(background.jpg);
background-repeat: repeat-x, repeat;
}
Related
I'd like to create the following effect:
There are two full-screen images on top of each other, but only one is visible. When you move the mouse, the second one is revealed within a circle where the mouse is.
I know how to create the circle that follows the mouse using JS. As for the image overlays, I'm stumped. I fiddled with pseudo-elements, with clip-path and opacity, with radial-gradient, with multiple backgrounds -- to no avail.
Radial-gradient would actually be ideal here, but as far as I know it only accepts colors, not images.
Perhaps a third overlay layer? Any ideas? (If there's already a CodePen that does this and that I've missed, please link to it).
Thanks y'all!
short answer: (and all the code below is commented)
I used background property in a <div> instead of using a <img> tag...
the trick is when you use background-attachment: fixed;
in this example, I used 2 backgrounds from Windows 11 OS and you can see really the trick! one dark and one light...
detailed explanation:
so the a <div> and assigned a background-image to the URL of the light-image
the problem here is: when the div is moving with JS, also the image move...
but I find a solution
make the image fixed, which make the image be always in the same position, also if the image is moving
#circle {
background-attachment: fixed;
/* your code */
}
the problem here is: the image isn't responsive,
but I find solution:
make the image size to cover so it will auto-adjust the size and height of the image automatically to the viewport of the device.
#circle {
background-size: cover;
/* your code */
}
for moving is simple... because we can use Javascript, with an eventListener of mousemove
document.addEventListener('mousemove', (e) => {
/* your code */
});
now solved all the problems, however, I will put some documentations below
documentation that can help you:
CSS background-image MDN
CSS background-attachment MDN
CSS background-size MDN
JS mousemove event MDN
here the code
the code can seem to be long,
but not really because I added a lot of comments so everyone can understand
let circle = document.getElementById('circle');
// on mouse move move the circle
document.addEventListener('mousemove', (e) => {
// make the image move relative to the mouse (make sure that in css you applied position: relative; to the div)
circle.style.left = e.pageX - 100 + 'px'; // 100 is half height of circle, so the cursor is in the middle
circle.style.top = e.pageY - 100 + 'px';
});
body {
margin: 0;
overflow: hidden;
}
#bg-image {
position: fixed;
height: 100vh;
width: 100vw;
/*make the background responsive*/
object-fit: cover;
/* under the circle div*/
z-index: -1;
}
#circle {
height: 200px;
width: 200px;
/* make the the div circle */
border-radius: 50%;
/* important using relative for using top and left in javascript */
position: relative;
/* change the url with the link of image you want */
background-image: url(https://laaouatni.github.io/w11CSS/images/0light.jpg);
/*center the background */
background-position: center;
background-repeat: no-repeat;
/* TRICK: making the background responsive*/
background-size: cover;
/* TRICK: the MAGIC is HERE make the image fixed, so is not moving */
background-attachment: fixed;
}
<!-- background image -->
<img id="bg-image" src=" https://laaouatni.github.io/w11CSS/images/1dark.jpg" alt=" ">
<!-- the circle, and moved with javascript -->
<div id="circle"></div>
please see in full mode,
for better results... you can change the values to something like vh or vw for making this more responsive.
I hope this will help you.
You can use a radial gradient as a mask in CSS.
This snippet has an 'underneath' element which is in fact above the background on the body element.
The mask-image cuts out all but the part of its background which is underneath the non-transparent part.
Obviously you will want to alter the dimensions to fit your use case.
Also, the mousemove does literally that (not looking to see whether mousedown for example) just to give a simple demonstration.
Note that some browsers still require a -webkit- prefix for masks.
<!doctype html>
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
background-image: url(https://picsum.photos/id/1016/1024/768);
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
}
.underneath {
position: absolute;
width: 100%;
height: 100%;
--x: 50vw;
--y: 50vh;
background-image: url(https://picsum.photos/id/1015/1024/768);
background-size: cover;
background-position: center;
-webkit-mask-image: radial-gradient(black 0 15vmin, transparent 15vmin 30vmin);
-webkit-mask-size: 30vmin 30vmin;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: calc(var(--x) - 15vmin) calc(var(--y) - 15vmin);
mask-image: radial-gradient(black 0 15vmin, transparent 15vmin 30vmin);
mask-size: 30vmin 30vmin;
mask-repeat: no-repeat;
mask-position: calc(var(--x) - 15vmin) calc(var(--y) - 15vmin);
}
</style>
</head>
<body>
<div class="underneath"></div>
<script>
const underneath = document.querySelector('.underneath');
document.body.addEventListener('mousemove', function() {
underneath.style.setProperty('--x', event.clientX + 'px');
underneath.style.setProperty('--y', event.clientY + 'px');
});
</script>
</body>
I created a <div> first thing in the <body> to draw a top line at the top of the page:
<body>
<div class="bordertop"></div>
.....
</body>
and the style:
body {
font-family: Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
margin:0;
}
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
}
However, the top_border image doesn't appear unless I write some text inside the <div> but I don't want to. How could I fix this?
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
.bordertop
{
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
height: 100px;
width: 100%; /* may not be necessary */
}
You might need to set the css width and height of your <div> element to whatever size you want
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
width: 200px;
height: 100px;
}
Give the div a height:1px. That should work. Otherwise your div is 0px high, meaning you won't see anything.
You could also give it padding-top:1px
Another thing you could do is to set the background-image of the line on the body in your CSS. This is assuming the line is the entire width of the body.
See demo
As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.
On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.
The best way I have found is:
for landscape:
width:100%;
height:0;
padding-top:[ratio]%;
for portrait:
width:[ratio]%;
height:0;
padding-top:100%;
You need to determine which side is longer and accept this dimension as 100%
then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.
I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.
Example code:
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp
If it is the only div element in the body use the following style to to make it occupy the full-width.
.bordertop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
url('../images/top_border.png');
}
I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.
left {
width: 800px;
height: auto;
min-height: 100%;
position: relative;
background-image: url("../img/loginpic.jpg");
background-size: cover;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: crimson;
}
Otherwise, you can just open a <p></p> and in styles, remove the default margin length, that's margin: 0; and add height: 0.1px which doesn't consume much space, so it'll work.
Note: it'll work properly until it's not zoomed out more than 50%, so make sure of the use case before you apply it to the body.
I have a background in place on my wordpress theme,
I have another image which I would like to position it in the center of the page and horizontally repeat it from left to right.
very similar to this website http://www.tcs.com/homepage/Pages/default.aspx
any tips or instructions is highly appreciated.
Thank you
I would use a wrapper to accomplish this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background-image: url(image1.jpg);
}
#wrapper {
background-position: center middle;
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-image: url(image2.jpg);
background-repeat: x-repeat;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
You can set multiple background images with CSS3 like this:
body {
background: url(first_image.png) top left no-repeat,
url(second_image.png) center center repeat-x;
}
You just have to separate the rules with a comma. It's pretty widely supported.
Is this what you're looking for?
http://jsfiddle.net/4S5HR/
It depends on where you have your original background image. If it was attached to the html like this
html {
background: url(original-background.png) top left repeat-x;
}
You could attach the repeating horizontal image to the body like this
body {
background: url(repeating-background.png) top center repeat-x;
}
Could you provide some more details as to how your css is and I can give you a more detailed answer but this should work for what you require.
I have an image, the top 80px of which I want to use for some other purpose, and remaining image, I want to set as a full page background image.
I tried setting:
background-position: 0px -80px
but it does not work.
How to properly use css sprite (background position) and full page background image?
Either of these (link or link) will generate a sprite for you and the corresponding css.
Once you have that completed use the css classes for their corresponding areas like:
.image1Background {
background-image: url("thesprite.png"),
left: -80px;
top: 0px;
}
.image2Background {
background-image: url("thesprite.png"),
left: 0px;
top: 0px;
}
<body class="image1Background">
<div class="image2Background">
</div>
</body>
Sprites are generally used for a lot of little icons to reduce the number of requests needed to download them to the client.
i would use a div for the 80px image and the background img as body background.. something like:
body { background-image: url(background.gif) }
#imgtop { height: 100%; width: 100%; background-image: url(80px_image.gif) }
If you don't know what I mean, check this image out:
Multiple images
I want to know how it works, CSS yes, but exactly how does it all work out when using a background using this image and then it is all cut all exactly what it is supposed to do - when determined as a background for this image.
Would be interesting for me to know how - so I can take my CSS level up a bit more :P
Thanks
What you are looking for is CSS Sprites, there are heaps of tutorials and ways to achieve this. Basically what you are doing is declaring a background and using background-position to decide what in the background is displayed.
CSS Sprites are great by the way, good job for trying to figure them out.
{
height: foo;
width: foo;
overflow: hidden;
background: colour url() no-repeat 0 pixels-to-top-of-image;
}
<div id="buttonOne">Button 1</div>
<div id="buttonTwo">Button 2</div>
#buttonOne, #buttonTwo
{
background-image: url(/images/ALL-BUTTONS-IN-ONE-IMAGE-TILED-16PX-APART.png);
background-repeat: no-repeat;
width: 16px;
height: 16px;
overflow: hidden;
}
#buttonOne
{
background-position: 0 0;
}
#buttonTwo
{
background-position: 0 -16px;
}