I have a background which cycles through images, these images have no fixed sizes.
My problem is that I cannot find a simple responsive frame for re-sizing images which are dedicated background images. There are plenty of plugins for normal images on websites.
The background of my website always has to have the image displayed.
cropping is allowed, is allowed the image must re-position itself in the center of the web browser.
jQuery or #Media is allowed, I don't really mind.
My images and div look like this:
<div style="width:100%; height:100%; background:white; position:absolute; margin-left:0px; margin-top:0px;>
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
A lot of the plugins out there set width to 100% and the height to auto. This will not work as if the browser width is, let's say, 200px and browser height 800px. The image will not cover the entire screen and keep it's aspect ratio. There will be a "gap" under and above the image, so in this case, the height should be 100% and width changed to auto. And of course the other way around if the browser height is 200px and browser length is 800px;
Example of what I want: http://www.martinlogin.se/
You're asking for two different scenarios to be applied depending on screen aspect. This can be done with media queries, but you'll need to settle on some widths and heights.
Start with width-based sizing:
#backgroundDiv {width: 100%; height: auto;}
When the site is narrower than some point, switch to height-based sizing:
#backgroundDiv {width: auto; height: 100%;}
You'll need to decide where the transition takes place based on your expected audience's most likely screen size/aspect scenarios, the images you're using, etc.
To have even more flexibility, say for particular aspect ratios instead of widths, you'll need scripting.
Related
I want a hero section in my website with a running video instead of an image, styling is easy peasy for a background image but a pain in the a*s for video. This is my code:
<section>
<ReactPlayer
url={backgroundVideo}
playing
loop
muted
width="100%"
height="100%"
/>
</section>
What CSS should I add in order for it to cover all the width of the page but a small height (like 600px let's say)? For the moment it takes all the width (they way I want) but the height is too big, and I can't manage to just frame a portion of the video, because when reducing the height it automatically reduces the width... How can I manage to get just a portion of the video, to fit say 100vw of width and 600px of height?
See this pen:
https://codepen.io/armandsdz/pen/xqGaoe
I have a simple Foundation grid and I set display:flex to "row" element in order to get all columns be the same height.
It all works fine in Chrome, Firefox.
But on Safari, Edge, Yandex browsers (any version) those columns are a pixel or so too wide and it results in them not fitting within one row. Therefore, it wraps to two rows.
See image
Setting flex-wrap: nowrap would be an option in case of only one line but it's often not the case.
And most importantly it doesn't solve the issue at its core.
What am I missing in this flexbox world or is it a bug?
Thanks!
Addition: It happens not only when column width is, for example, 33.33333% but also when it's 25%. So where does that extra pixel come from?
The :before and :after pseudo-elements are part of a clearfix hack to contain floats and prevent margin collapse. (See this SO question about that.) Flexbox essentially disregards floats, but older browsers that don't support flexbox would fall back to using the floats so they would need the clearfix. Based on #DannieVinther and #Armands' comments, there are two possible solutions:
If you want to maintain the clearfix functionality for older browsers that don't support flexbox, you can add a rule to set width: 100%; on the :before and :after pseudo-elements. This will give the pseudo-elements a width of 100% and a height of 0, so they won't mess with the width of the rows of actual content.
.row:before, .row:after {
width: 100%;
}
If you don't need/care to support older browsers, you can simply override the clearfix hack by adding a rule to set content: none; on the :before and :after pseudo-elements.
.row:before, .row:after {
content: none;
}
I am using Pelican for generation of web pages. However I cannot avoid overlapping of code blacks with the menu list this way.
This the concerned code piece
General
Start by reading
The Zen of Python <https://www.python.org/dev/peps/pep-0020/>_
.. sourcecode:: python
import this
For python we have pocket-lint that checks for PEP8 and some other things.
Try the following:
#general .highlight {
display: flex;
}
#general .highlight pre {
width: 100%;
}
The display mode flex allows the contents to rearrange in size and position. By setting this, the bounding box of the surrounding div is pushed to the right, such that background color and border are not overlapping anymore. However, due to the flexible nature of this display mode, the width of the content is reduced to the minimum required. This can be compensated by simply maximizing the width of the element.
I have the plugin working on a slideshow of images here:
http://samsweet.info/
I've uploaded all the images at the desired full size; all fall within 600 X 500 px. If I don't specify the height/width in the shortcode, the images are stretched and blown out to fill the entire content area. But when I specify the height and width in the shortcode, the images are not responsive and do not "shrink down" when the window is resized. Can someone guide me on how to get these images to (a) show up as they are at full size, centered and (b) resize properly in a smaller window/mobile device?
Any help appreciated!
If your slider is wrapped in a div, try just resizing the div with css. That way your images will keep their aspect ratio, but you can still use percentages (and max-width).
.slider-div{
width: 80%;
max-width: 600px;
}
This boggled my mind for a year and today I finally figured it out. It is the transition that is stretched. When I changed it to effect="none" it still worked and no more stretching. But the quick click buttons below the images no longer work. Ahhh...always something. But there's a clue at least.
I want a background-image that only resizes if the browser is larger than the image size. Therefore, I need a min-height equal to the image pixel height, but also a height of 100% if the browser's height is larger than the image height.
I know I might be able to do this with a div, but would rather use the background-image & background-size CSS properties. This is all I have so far:
body{
background-image:url('Images/newBG.jpg');background-size: 1911px 824px;
}
Any idea where I should put the min-height or if this is even possible without using a div? If someone has the div solution, I would appreciate that also.