I have a fixed nav bar at the top and a container with a full width Background spanning span12. but since the content of the background image is crucial for the layout for visual cue. i want the whole image to be displayed at all times irrespective of the window size.
Which is the best way to construct the image or set of images to achieve the same.
Large Monitor
Medium Monitor
Small Size
I have a form that will be displayed to the right of the image. Hence making it a little tricky for me to get the image working.
Link: play.mink7.com/minkstock/
If I understand correctly, you want just to have a maximum size (or percentage) that your image can reach. Try, instead of a background image, using a <img> element like so:
img{
max-width: 100%; /* or any other value */
height: auto;
}
Is there any reason you chose to set the background image using css?
If i change the #landing-page-bg div to
<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;">
<img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg">
</div>
It produces the desired effect you want (minus some red background you set).
If you wanted to then overlay items on the image you could use relative div positioning.
Do something like background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat; for your small media query.
Related
I am adding a instagram section into an Angular webapp. The problem is video thumbnails on Instagram are widescreen (rectangular), and photo thumbnails are square. Instead of getting a nice grid of squares, some are rectangles, ruining the design.
Is there anyway to automatically add black bars to the top and bottom of these widescreen images to make them squares? All thumbs should be need to be the same size. The solution does need to be dynamic/responsive, so I cannot use fixed widths and heights and then stretch the thumbs manually.
I am using bootstrap in order to organize/display the thumbnail grid.
I have already tried setting the square div's background images to the thumbnails to no avail. I have also tried setting the background color of the photo div in hopes of achieving a black bar effect. I would like to maintain the aspect ratio if possible hence the black bars
Notice how the one thumb is a rectangle, and not square
<div class="row">
<div class="col-4 ig-posts" *ngFor="let igPost of igPosts" (click)="gotoigPost(igPost)">
<img [src]="igPost.imageUrl" class="img-fluid" id="ig-post" />
</div>
</div>
.ig-posts{
margin: auto;
vertical-align: middle;
text-align: center;
padding-top: 2.5%;
padding-bottom: 2.5%;
}
#ig-post{
border-radius: 20px;
}
I have tried the solution here to no avail
I think you search for object-fit or otherwise setting the image as background.
The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.
https://css-tricks.com/almanac/properties/o/object-fit/
I was able to fix the issue by making three divs. A background div, a container div, and the actual image div. Using tables I was able to achieve the desired result. Thanks all!
I want a background image to appear at the top part and fully cover the width of a page. As you can see, the image is quite wide and short - https://i.imgur.com/aJb6eBr.jpg. This should be the header image of a page, with the contents of the page appearing below it.
If the browser's width is bigger than the image's original width, the image's width and height should be enlarged proportionally (together with its container - thus pushing downwards the page's contents that appear under the image).
If the browser's width is smaller than the image's original width, the image should retain its original size without shrinking, and be cropped from both sides until a 15% crop is reached from each side (You can see that the image has quite wide green areas on both sides which are safe for cropping).
The tricky part is that once 15% of the crop has been reached from each side, I want the image to start shrinking proportionally to the browser's width, thus the middle 70% of the image will always be seen, and the image will never be cropped more than 15% from each side.
The height of the image (and it's container) should rescale automatically in proportion with the image's width. If the image's height (together with its container) shrinks to be smaller than it's original size, the page's contents are pushed up so the distance between the page's contents and the image is always kept the same.
I'm looking for a clean solution (preferably with CSS only) similar to this:
https://demodern.de/projekte/mediengruppe-rtl
Any ideas guys?
In terms of using CSS it is pretty simple to make everything work as you need. In order to do this you might use the image as it is via and the same image on a parent element's background. But you will have to adjust your CSS to work with this image ONLY. In case if you will try to use another image - you will have to adjust paddings or mediaqueries. Solution that works a kind of ONE time for a specific image, but still, it doesn't use JS at all, which is great. And regarding referencing the image twice - it is not a problem for a browser. It will make only one http request for a single unique media asset so no performance problems from this perspective.
Here is a way how you might do what you want:
.wrapper {
background: url(/images/_m1NuVvd.jpeg) 50% 50% no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
padding-top: 38%;
}
.wrapper img {
transform: translateX(-50%);
left: 50%;
position: relative;
min-width: 100%;
display:none;
}
#media screen and (min-width: 1338px) {
.wrapper {
padding-top: 0;
}
.wrapper img {
display: inline-block;
vertical-align: top;
}
}
<div class="wrapper">
<img src="/images/_m1NuVvd.jpeg" />
</div>
Make sure to use a proper path to your image instead of /images/_m1NuVvd.jpeg.
BTW, in future it will be better to probide links to the images in a way, so those might be reused in jsfiddle. Dropbox doesn't allow to use the image via that link.
Best wishes
Currently working on a landing screen where users choose a colour theme on the site. There are two coloured sides that 'grow' on hover giving the effect of colouring the website seen on a mockup infront. (Check out the Codepen below to get what i mean, it's kinda hard to explain fully)
Demo: http://codepen.io/BAWKdesign/pen/PPvRjz/
To 'color' the mockup two images are used placed over one other.
It needs to be responsive so I've given the back image width: 100%; height: auto; which is also used to dictate the size of the parent div.
The top image is set to width: auto; height: 100%; as using width 100% causes the image to stretch and not clip.
The problem is, the overlaid image appears larger in size as you can see in the link below giving a cut up image effect. Perhaps there are differences in how the size is calculated when you swap 100% and Auto around?
Hopefully this is just me having a brain fart and I've made a rookie mistake somewhere!
Images are by default inline elements meaning they naturally have some spacing around them. You are setting your other images to position: absolute which causes them to display similar to a block element - ie. no default spacing.
Simple solution is to add display: block to your image element:
.img {
display: block;
}
Updated CodePen
I'm trying to add a responsive image to a front page that expands to the full width of the page. Similar to what many sliders do, but I only have one image so a slider is overkill. I've set up a div and set it's background image and background-size to 100% and that achieves the width. My problem is the height. I have to use a fixed height in order for the div to appear. I've tried setting height to auto, but then I don't get an image. I tried using this method:
How can I resize an image dynamically with CSS as the browser width/height changes?
but I can't seem to get the width to scale correctly. Using a fix height works fine until the browser window expands past the size of the image, and then it starts to cut off. Any thoughts on how I can make the height scale dynamically just as the width? Any thoughts would be greatly appreciated!
My code:
CSS:
.banner {
max-width: 100%;
height: 720px;
background: url(../images/homepagebanner.jpg) no-repeat left top;
background-size: 100%;
}
HTML5:
<div class="banner"></div>
I am using bootstrap, but this is outside of a container so it shouldn't be affecting this piece of code.
EDIT Here's the codepen:
http://cdpn.io/xLvzA
Have you tried setting the height of html to 100%, then setting the height of your banner to 100%? Adding a codepen demo to show your exact issue might help a bit better to help vizualize the exact problem you're having
I am using a background image for my top "heading" div section of my website. It was drawn on CorelDrawX6 and exported to a .jpg image, meaning I can't set the height and width exactly right when exporting. What I want to achieve is have the webpage scale the background image to the right height. I want to have height:150px; width:100%, but because it is applied to the div like this:
<div style = "height:150px;background-image:url('Design.jpg');">
I can't apply styling directly to the image. Does anyone have a solution?
P.S. I have checked out many of the "related questions" and have not found an answer. Also, please bear in mind I want a background image for one div, not the whole page (which would be a lot easier).
Current situation:
My desired situation is to have the full image as a background (the current image is a scaled-up version, the real image (which I could not upload) looks the same but has text on, and the light blue bar is much smaller).
try
HTML
<div class="lorem" alt="lipsum" title="lorem lipsum">
<img class=ImgLorem></img>
</div>
CSS
.lorem{
}
.ImgLorem{
}
.lorem img{
background: url(Design.jpg);
height:150px;
width:100%;
}
this should work.
Let me know.
This is what you looking for?
background-size: auto 150px;