How to make background image responsive and cover all area - javascript

hello i want to add background on my site but everytimes i do it wont fit in my website
i tried
background-size:auto;
i also tried cover it even make image worse
background-size:cover;
i tried background-size:contain; too ,good then cover but not worth it there is still lots of space
am i the only one finding this tought or does any other have same problem ?
i also tried<body background="img_url" > it doesn't help
any help will be highly appreciated

If you set the of the image to 100% and height to auto (I believe) it will keep the proportions of the image and cover 100% of the width of the parent element.

Related

Vertically Centering All Photos on Flickity Slider

Building out a flickity carousel to look like this and having some issues w/ spacing on my CodePen.
codepen
looks good but want to make spacing between slides less and also the spacing is fairly equal but not 100% equal between each. For example, it says left 10% for the spacing but if you put a few more vertical photos back to back, see this image for approximate spacing in pixels that are not the same equal widths (pic)
Images should be <img src="x"> versus background image as well for accessibility and adding alt tags too.
Anyone have any hints in the code on how to fix it so the images appear larger, then take up more space (so there's less space between the slides) and also ensure that any image i put in there is equally horizontally spaced between them? Seems very close on the example attached. I tried messing with the padding/widths on 1st one but it gets strange.
Remove height: 100% from the image and only leave width: 100% so all images are going to have the same horizontal space.
And use .ui-thumbnail-img to center the image inside it.
I create a jsfiddle for the solution. https://jsfiddle.net/vzphr3n5/3/

Stretch content div to fill screen when content is less than whole page | Enjin

I'm working on an enjin site for a friend and cannot for the life of me understand how to make the page here stretch to fill the whole screen vertically if the content does not have enough in it to do it on it's own. I've tried scripts and CSS of a dozen or more solutions and cannot understand how to make it do this because it's not my code, its Enjin's, and I have to work around it.
There are 2 pages in question, one is a standard format page so anything done to it can be done to all pages except the custom one and there will be no problems, and the other is a custom coded page using their HTML module. The key is the same solution is necessary for both but they have different code.
Custom Page: X |
Standard Page: X
Simply put I'm asking for a solution here. I tried the flex solution, height 100% with block display, javascript to find the distance between the bottom of the bottom div and the bottom of the monitor and adjust height accordingly, and more. Nothing seems to work. Any help is very gratefully appreciated.
I can provide any more details necessary, just ask.
What you are trying to accomplish is 2 things. First you want to make the div #memberContainer always be at least as tall as the users screen minus the height of your footer.
This can be acomplished with css using the "vh" unit. The vh unit is defined like this:
Relative to 1% of the height of the viewport*
And the calc function, as you will need to subtract 100vh (the screen height) from the height of your footer (180px).
So you need to add this code to your #memberContainer.
#memberContainer{min-height: calc(100vh - 180px)}
The second thing you need to do is make sure the background image of #memberBlock always covers the entire visible portion of the screen.
The image itself is 1920*1080, which is a standard 16:9 resolution. Assuming you only wanted to target 16:9 screens this would work fine. However to cover mobile phones and all other screens I would recommend you use:
#memberBlock{background-size:cover}
This makes sure the image will always cover the screen.
You can't have no gap and no content to fill it. There will have to be a gap somewhere.. Your gap is appearing in the middle because the footer is absolutely positioned. If you stop positioning your footer absolutely, the footer will cling to the body-wrap, however, you will still have a gap at the bottom, it just won't look as bad.
.myfooter {
display: none;
width: 100%;
position: relative;
background-color: RGB(20, 20, 20);
height: 180px;
bottom: 0;
}
If you really wanted to make it fit the screen, you could give a min-height with a calc of 100vh-FooterHeight
position: absolute;
height: 100%;
There may be other issues with this as i have no idea how mobile or responsive stuff would work for your site specifically but this is one way. You are coupling the BG div to the content div - that is why you are seeing that behavior - you need to make the BG a sibling div of content instead of a parent child relationship then you can have more flexibility on how it works - but for now my option seems to work

Left aligned div not centering on certain page sizes

An example of the page in question: https://rhstrategic.staging.wpengine.com/team/brandon-blackwell/
I have kind of a specific situation here in which I have a block div that is staying aligned left and using only a 50% width when the screen is sized below 960px (The name block in the red banner part at the top). I tried altering the CSS to make the width 100% but the problem is that the height seems to be being generated dynamically with with width (If I increase the div width to 100% the height doubles as well).
I can't figure out how to separate the height and width and I don't know where or what file these CSS changes are being dynamically generated from. It looks kind of like an HTML5 data object but I'm a bit new to these types of things so I'm not sure how to change it. When it gets down to 650px it seems to behave as I want it to. But between 650-960px it is left aligned.
All I need it to do is when the page goes down to 960px or below, I need that part that is left aligned currently to be full-width across the page and centered. Any ideas?
Just a warning: I'm not 100% sure that this answer will work correctly... My idea is to put this style in the div:
div{
width:100%;
height:50%;
}
Couple of things I would like to suggest:
If you are new to front-end designing, I would recommend you to understand the grid system of a HTML page. Learning Bootstrap will be a perfect start for you.
Now you want to make your website fluid, so take a look at CSS media query. This will help you to achieve responsiveness.
Happy Coding..

One Background Image, Multiple Divs

I am going to explain my question with a series of images.
A div container will have the following background image:
On top of the image, there will be tile like divs:
My goal is to make the background image visible to only the tiles, and the rest hidden:
Any help is greatly appreciated, thank you!
Use the background-attachment attribute like in the following fiddle:
http://jsfiddle.net/1ovd3cnk/1/
each image block gets the following:
background-image: url(http://i.stack.imgur.com/fOV15.png);
background-attachment: fixed;
edit: was setting margin on row instead of conatiner
Sorry reply like this, I don't have reputation enough to add comment in other comments, but making some adds to the earlier answer:
The image shifted could be fixed using:
background-size: cover;
But remember that cover property isn't supported in old browsers.
http://caniuse.com/#search=background-size
So if you want cross old browser compatibility I recommend you to try javascript and do some maths using the width and height from your elements to adjust de background image position.

Why does my background picture zoom?

I have some toggling journal entries and everything works okay except my background picture zooms in or out depending on which entry I am on. It seems that it zooms in more on the longer entries and zooms out on the shorter ones. The background is under the body tag in my CSS.
Here's my background that's having problems.
body {
background-image: url("http://housedivided.dickinson.edu/grandreview/wp-content/uploads/2010/02/HD_4USCinfantryDetail.preview.jpg");
background-size: cover;
}
Here's my full code: http://jsfiddle.net/michaelpri/urz1sLa8/2/
Any help is greatly appreciated.
Try using contain instead of cover.
When you click, the page height changes, and the background has to cover it all, so it zooms in.
It's just how the background type acts.
Try to use background-size: 100% 100%;, it will stretch the background to the screen size
It zooms because the body size changes when you display these paragraphs under the menus. If you make paragraphs the same size then it will probably stop zooming. Or if you make them independent on the body. Perhaps position: absolute will help.

Categories

Resources