I am unable to remove the empty spaces around this clipped image. The original size of the image is 1200x800 but I want to show only a small section of this image at a certain point on the page. But in the background it still takes the size of the entire image creating all the space between the header, image and the content. Here's my Plunker code
CSS
img {
max-width: 100%;
clip-path: inset(248px 0 238px 0);
}
HTML
<body>
<h1>Header Here</h1>
<img src="http://via.placeholder.com/1200x800" alt="image" />
<div>
Contrary to popular belief, Lorem Ipsum is not simply random text.....
</div>
</body>
You can use this code for your solution:
#img {
position: relative;
width: 800px;
height: 100px;
overflow: hidden;
}
img {
max-width: 100%;
position: absolute;
top: -220px;
left: 0;
}
<div id="img">
<img src="http://via.placeholder.com/1200x800" alt="image" />
</div>
I was able to make it work by using the tool https://bennettfeely.com/clippy/.
I moved each of the points in the white space back 5%. This will give the clip-path mask more breathing room or bleed space.
Giving the path less space gives the image more room.
Related
Hi There I am trying to get a background image display under my content and still show so content can go ontop of it.
Here is the code I have at the moment it is extremely simple
<div class="flower-image">
a
<style>
.flower-image{
background-image: url("/wp-content/uploads/2022/10/rose-fade-vertical.png");
background-repeat: no-repeat ;
background-position: right ;
}
</style>
</div>
This code allows for a image specified by URL to load and and some code to stop it repeating and for positioning. The issue I am having is I need the image specified in background-image to not push my existing content down the screen and sit in the same position permanently. This has been done on WordPress on the page page.php so it will do the same thing across every page.
Any help would be appreciated.
Do the following:
add position: absolute; (the content will not be pushed down)
add z-index: -1; (the image will be pushed behind the content)
But...
The content should be in a separate container.
See the snippet below.
Note: position: absolute; might cause some problems (depends on HTML & CSS). If nothing jumps out of place, everything is fine. If not, let me know and we will try to solve the problem.
.wrapper {
max-width: 100vw;
max-height: 100vh;
position: relative;
}
.content-container {
position: absolute;
}
.image-container {
position: absolute;
z-index: -1;
}
#img {
width: 100%;
object-fit: cover;
}
<div class="wrapper">
<div class="content-container">
<h1>
This is some random text
</h1>
</div>
<div class="image-container">
<img id="img" src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" />
</div>
</div>
I want to highlight an image when a user hovers over it.
To do that, I'd like to put an overlay over everything else (or honestly, I'd be happy putting an overlay over everything including the image, and then putting something to brighten the image as well).
Is there anyway to do this without JS? I'm happy to use a JS solution if that's all that's available, but I was wondering if there was any CSS-only trickery that could manage to do this.
Example HTML would be like this:
<body>
<div>
<Other Elements />
<img src="...." />
</div>
</body>
Preferably everything would be darkened except the tag.
EDIT: THIS IS NOT a duplicate. It is very, very different from Overlay Images
If you wrap your image overlay image in a div container like so:
<div class="wrapper">
<div class="other-content">
</div>
<div class="popup">
<img src="...">
</div>
</div>
You can use a pseudo element :before to style an overlay on your image.
.popup {
img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
&:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
}
See example here:
https://codepen.io/dominicgan/pen/WXaXPy
In my code I am trying to add a external border frame to the pdf, but when I do so, the content of my pdf breaks in between and continue in second page. To overcome that Issue I used page-break-inside:avoid; property on parent div. But this resulted in a new strange issue, its keeping the first page blank (without border) and adding the whole content to second page (With border) of pdf.
No way for me to understand what I am doing wrong.
I am detailing dummy code snippet below -
<style type="text/css">
#page { margin: 0px; }
body { margin: 0px; }
html { margin: 0px;}
.back-img
{
background: url('ImageURL');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
width:100%;
height:100%;
}
</style>
<div style="page-break-inside:avoid;" class="back-img">
<div style="text-align: center;">
<h1>Heading Text</h1>
<br>
<img src="ImgURL" height="100">
<br><br>
Some Text Here
<br>
Some Text Here.. Some text here..
<br>
Some Text Here
<br><br>
Some Text Here
<br><br>
3-4 lines of paragraph here
<br><br>
<img src="ImgURL" height="50">
<br>
Some text Here
<br>
Some Text Here
<br>
Some Text Here
</div>
</div>
Dompdf version is 0.7.0
PHP version is 7.0.18
Your help is much appreciated.
This is probably because you set the width and height of the container div to 100%. Dompdf doesn't do the best job flowing elements that are bumping up against the margins of the page. You have a few options to try to address the issuue:
Set the height and width of the container to be a bit less than the containing page. This is easier if you know the page dimensions in PT and can specify specific lengths for the container dimensions.
Style the container as a fixed-position element. It won't affect the document flow and will apply to all generated pages. Simply put the margins on the page and apply negative values to the border element.
For that latter try something like:
<style type="text/css">
#page { margin: 100px; }
.back-img
{
position: fixed;
background: url('ImageURL');
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
top: -50px;
right: -50px;
bottom: -50px
left: -50px;
}
</style>
<div class="back-img"></div>
<div style="text-align: center;">...</div>
I've had trouble with this over the years.
A solution that seems to work is make sure the first item is
page-break-inside: auto
on the first element, and then
page-break-inside: avoid
On any elements that follow
I have an image which has to take full width. And I need to put a text and a button on top of it in a specific place. I looked over many topics but can not figure out how to make it fully responsive.
<div class"wrapper">
<div class="image-box">
<img src="x">
</div>
<div class="content-box">
<h1>text goes there</h1>
<a>anchor tag goes there</a>
</div>
</div>
so this is the layout but it can be changed if it gets me to the point I need.
If I understand correctly the parent div called wrapper should be set to position: relative and all the child divs to position: absolute, after that you just position all these child elements with top, left, right, bottom. So after testing this this is what I get. Since the image is always 100% of the viewport it gets smaller and smaller by height and width because of its aspect ratio. The text and button on the image just stays at a fixed place and after some point it goes out of the image.
Whats my mistake?
P.S found a lot of topics but still, I am messing something up. Thank you for your insights and help.
The image tag is used to create a separate element on the page. This is not really what you want... you want the content-box to have a background, right? Rather than using the image tag, use CSS to apply a background image.
here is a jsfiddle
.content-box {
/* set width and height to match your image */
/* if these are omitted, it will only be as big as your content, */
/* and only show that much of your image */
width: 200px;
height: 300px;
/* obviously, replace this with your image */
background:url('http://placecage.com/200/300');
}
<div class"wrapper">
<div class="content-box">
<h1>text goes there</h1>
<a>anchor tag goes there</a>
</div>
</div>
I think this is what you want. Also, this is a good occasion to use those HTML5 tags figure
and figcaption, but basically all you need is this kind of structure:
<div class="wrapper">
<img />
<div class="content-box">
<!-- Your content here -->
</div>
</div>
So what is happening here is that your wrapper's dimensions are fixed by the image, and then you position absolutely your content-box or the elements within. If you do not want to position them at the very top or bottom of your image, just use percentage values when positionning:
top: 10%;
figure {
position: relative;
}
figure img {
width: 100%;
height: auto;
}
figure figcaption {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
background: rgba(255,255,255,.7);
padding: 10px;
}
<figure>
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />
<figcaption>
<h1>The image title</h1>
<p>This is the image caption</p>
</figcaption>
</figure>
I have headlines that should appear next to floated images if there is enough space, and drop below the images if not. I don't have access to the HTML, so I must do this in strictly CSS. This is an example of an image and headline HTML I receive, and what it ends up looking like on an iPhone, for example:
<p>
<img src="http://farm3.staticflickr.com2852/1232.jpg" style="height:265px; width:350px; float: right;"/>
</p>
<h3>THE HEADLINE</h3>
I've fixed this when it comes to wrapping <p> content around an image using the following trick, which creates a fixed width element before each paragraph which acts as a minimum width:
p:before { content: ""; width: 10em; display: block; overflow:
hidden; }
However, this approach does not work for a header. Any ideas?
is that what you are looking for?
http://jsfiddle.net/zh4AV/1/
html:
<div id="container">
<img width="100" height="100"/>
<p>headline</p>
</div>
css:
#container{
max-width:200px;
}
img{
float:right
}