My HTML template (responsive, created with Bootstrap) has a header with a background image.
Here's a simplified version (the <header> and its CSS are exact copies, the rest is simplified):
.bgimage {
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size:cover;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="bgimage" style="background-image: url('https://i.stack.imgur.com/hjPqu.png'); background-position: 50% 0%;">
<h1 class="display-1 text-center">this is the title</h1>
</header>
<p>this is the content</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
The website has many pages with image galleries.
For each gallery page, I pick one of the gallery images and use it as the background-image in the header, so each page has a different header image.
(and the background-position: x% y% values are also set per page, depending what makes sense for the respective image)
So I have:
many different header images
many different background positions
depending on the viewer's screen resolution, different parts of the respective header images are visible/invisible to the viewer
However:
All of the gallery images are "watermarked" with my site logo at the bottom right, like in the image I used in the example:
As I'm reusing the same image files as the background-image in the page headers, sometimes the whole logo or parts of it are visible in the header and I'd like to avoid this.
(if you run the snippet above, click on the "Full Page" link and resize the browser, you'll see the logo appearing/disappearing)
The logo is always the same size and the same amount of pixels away from the image's bottom...so just completely "hiding" the image's bottom 35 pixels would be enough.
So here's my question:
Is there a way to define a background-image in a way that the image's bottom 35 pixels are NEVER visible?
I.e. even if I set background-position: bottom, I'd like to see the visible part of the image start 35 pixels from the actual bottom, so my site logo is hidden.
I've seen CSS Display an Image Resized and Cropped, but I can't just set sizes in pixels, because my images are in many different sizes.
Not exactly, but you could clip off the bottom 35 pixels of the element to which the background image is attached. You’ll need to add bottom padding to prevent any content being clipped, and then a negative bottom margin to recover the white space resulting from the clip.
clip-path: inset(0 0 35px 0);
padding-bottom: 35px;
margin-bottom: -35px;
I think this would have the desired effect without any serious side-effects. The only trouble you might have is if you are using background-size to scale your background image larger, or using cover or contain, because if you are, the height of the watermark might end up being more than 35 pixels. In that case, you may be able to substitute the fixed 35 pixels with a calc expression including viewport width units vw.
#d1, #d2 {
background-image: url(https://i.stack.imgur.com/hjPqu.png);
background-position: bottom left;
}
#d2 {
clip-path: inset(0 0 35px 0);
padding-bottom: 35px;
margin-bottom: -35px;
}
<div id="d1">
One<br>
Two<br>
Three<br>
Four<br>
Five<br>
Six<br>
Seven<br>
</div>
<p>Content between</p>
<div id="d2">
One<br>
Two<br>
Three<br>
Four<br>
Five<br>
Six<br>
Seven<br>
</div>
<p>Content between</p>
Related
I'm getting the image from w3schools and I'm practicing using image sprites. I don't know what I'm doing wrong. I tried creating an image sprite with an image tag and a div tag, but neither option is working. I don't know if my path is wrong, but I have my image sprite in a folder called "images" and have my website in my desktop folder. Here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<img src="images/img_navsprites.gif" /> <br></br>
<img id="home" src="img_trans.gif" alt="home" />
<div class="img" alt="img"></div>
</body>
</html>
Here is my css code:
#home {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif");
background-position: 0 0;
}
.img {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif") 0 0;
}
Is this image considered an image sprite?
Here is my file structure:
To answer a couple of your questions:
"Is this image considered an image sprite?" I would say yes. Multiple smaller images composed together in a single image. A sprite is useful for reducing network calls to pull a single image instead of multiple images smaller ones.
You generally won't use an <img> tag to display a sprite. Sprites will be used as background images. The usage within the <div ... is more accurate as you are applying a background-image with CSS.
The Width and Height of your background image should represent the width and height of the smaller image within the sprite. You also need a background position to tell the browser where to start rendering with width and height.
The background-position CSS element is slightly misleading. It does start at 0,0 which is the top left corner of the sprite. However, from there the values go negative instead of positive.
To render the first house in the sprite, you have the background-position and width and height correct in the #home element, but you need to move the background-position to the .img element. The <div class="img"... is the one proper way of utilizing a sprite.
It should look something like:
<style>
.img {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif");
background-position: 0 0;
}
</style>
<div class="img"></div>
I also mentioned earlier about the background-position goes negative instead of positive. This means, for example, if I wanted to render the Bottom Right Arrow for instance you would apply negative X axis to the position and a negative on the Y axis as well.
That would look something like:
<style>
.img {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif");
background-position: -91px -45px;
}
</style>
Don't apply a background-image to an img tag, as you do it for your #home image
Make all those elements empty divs or spans in the HTML code, to which you apply the background sprite image, and use according background-position values to make the desired part of the sprite image visible.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body style="background-color:lightblue;">
</body>
</html>
External css file:
body
{
background-image:url("pass.jpeg"),url("skin.jfif");
background-repeat: no-repeat,no-repeat;
/* any background image will start from the top left corner of the element targeted*/
background-size: 100% 50%, 100% 100%;
/* setting the width and height of both the images */
}
will the inline css over ride external css or external css will over ride ?
but i know that inline css specificity is higher.
Specifity does it even come here as both properties are different and element is same i.e body.
Why the output is like this? what is going on?
How the whole process works?
Is the html parser first injects background color light blue to the whole body then embeds two back images.
Why the images are up there like a thin line
well, there is a hierarchy level on style, have always in mind that the closest style of the tag will be always the first to take effect then the others will always be in the back of it.
As i can see, the problem in your code that are making your images stretch is this line with: background-size: 100% 50%, 100% 100%; - The problem here is that you're using percentage as a metric, you should use other metric numbers as px, em, rem, vw like width: 50px height: 50px;
You was trying to set up the width and height of the images right? I don't think you can set up it individually but only the width and height of the background. If you can cut or re-size the img on paint, then use it again. If you still want to re-size the background, i advice you to create a inside your tag, and try to put the images as background of this div, then use background-size: 150px 100px; for example, the background-size on this div.
Inline styles (style="") override internal stylesheets (<style>) which override external stylesheets (<link>). This is the cascading effect of CSS, which stands for Cascading StyleSheets. You can use !important after a style rule to give it more priority:
body {
background-image:url("pass.jpeg"),url("skin.jfif")!important;
background-repeat: no-repeat,no-repeat;
/* any background image will start from the top left corner of the element targeted*/
background-size: 100% 50%, 100% 100%;
/* setting the width and height of both the images */
}
I want to have a page that takes the full height and width of the client window. I want to be able to position divs within the page using position=absolute, with a specified transform. They will be playing cards on a table, so they'll have an x, y, and rotation. This all works great, but on mobile, when one of the absolutely positioned elements goes beyond the boundaries of the parent, the browser adds a scrollbar and lets you scroll to the out-of-bounds elements. I've found that I can clip the rendering of the absolutely positioned elements by using clip-path: inset(0) on the parent, but the mobile page still lets you scroll over to the white part beyond the application. Is there some other way to restrict the viewport to just the body so I can keep my full-page, non-scrolling experience in tact? I don't think overflow:hidden works here because of the absolute positioning.
here's an example. https://ddeklotz-static-page.s3.amazonaws.com/example.html
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app">
<div class="square"/>
</div>
</body>
</html>
body {
margin: 0;
overflow: hidden;
}
.app {
background-color: red;
min-height: 100vh;
clip-path:inset(0);
}
.square {
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
transform: translate(330px, 50px) rotate(20deg);
}
I think I found something that works: I needed to add "user-scalable=0" to my viewport meta tag's content. It looks like before the viewport was zoomed out to show the full extent of the clipped div's bounding region, which isn't what I wanted. Disabling user scaling means we just keep the layout viewport in view, I think.
It looks like I also could have use position:fixed (instead of absolute) to address this, but that would have made the positioning of the divs more difficult (as their parent isn't likely to have the same origin as the viewport).
I have banner that needs to have an image aligned to the left and full height from top to bottom. To the right of the Image is an H1 with a Tab-selection Div, and below that is Text/Content Div. The Image is set to the height and width I want through WordPress.
Here's an image of what i'm going for:
I can somewhat get what I want by floating left on the image to get the Div Text to go to the right.
But my biggest problem is that I can't get my image to align top left of the banner properly. I had to use -142px margin left and -281px margin-top just to get it to look like it was, but on bigger screens I want that image to always stay left and consistent. It doesn't stay left on bigger screen sizes.
Here's what it looks like:
Here's the code for the Image Div:
(image dimensions set on WordPress as 641 width x 716 height)
margin-left: -142px;
margin-top: -281px;
float:left;
max-width:103%;
left:0;
display:inline-block;
top:0;
position:relative;
The damn image just stays at the bottom. I made sure that the H1 element wasn't displayed as Block in case it was blocking the Image from moving up.
There is a wrapper around the Div Image and Div Text that I used this code:
display: inline-block;
position:relative;
width: 100%;
When I look through Chrome inspector, the width of the Image and Text wrapper doesn't go across the Banner section all the way either. Is this wrapper just my problem? Or is it how I'm targeting the image?
Also just to clarify: I'm trying to code this banner on WordPress so there is pretty limited HTML changes that I can make.
Thanks!! I've been looking everywhere on SO and Google and can't seem to find what I'm looking for. Maybe my problem is too specific? I'd really appreciate the help. I'd also be happy to give more examples / post more code if it helps.
give css to <img>
img{
height:100%;
max-height:100%;
width:auto;
}
may be this should work or if not then just post your html css i can help more from that
Here is a short example of what I did that may help you out some. There's no need to use the float property for this. Just specify the width property to whatever size you want it to be based on screen size.
* {
margin: 0;
}
header {
background: url(https://placeimg.com/1000/500/any);
width: 100%;
height: 500px;
background-size: cover;
}
header .header_img_left {
background: url(https://placeimg.com/640/480/any);
width: 35%;
height: 100%;
background-size: cover;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<div class="header_img_left">
</div>
</header>
</body>
</html>
I am making a mobile webpage that is the height of the mobile screen but scrolls horizontally through its content.
The problem I am running into is that a div with a fixed position will only scroll horizontally until it reaches the viewport width (I have been testing in chrome with device mode enabled and the iPhone 6 selected, which has a viewport width of 375px while my body element has a width of 1875px).
Here is code showing a simplified version of my problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=1875, height=device-height, initial-scale=1">
<style>
body{
width: 1875px;
margin: 0px;
}
div{
width: 200px;
position: fixed;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<p>This is the test paragraph</p>
</div>
</body>
</html>
I have found similar questions, but most people are asking how to stop a fixed div from scrolling horizontally, whereas I want the fixed div to scroll the entire width of the body element without stopping at the viewport width.
I would put up a fiddle but I cannot replicate the problem without a device simulation like in the chrome dev tools.