I'm doing a website and i added a background-img behind my contact form. Firstly, some screen of my page:
Here's my page in fullscreen:
Here's my page when i resize it:
As you can see, the background-img of my div is repeated when i resize my page. I want it to keep the same size even if the image will be cutted. I tried to change the width but my div's width is changing too and that's not the behavior I want. I also tried to change the background with the fixed attribute but it seems not working.
I hope you will be able to help me !
Thanks
use these css properties
background-size: cover;
background-repeat: no-repeat;
Related
I am creating a website as part of a University project and am tying to get a parallax effect on some images. I've been following the tutorial over at W3Schools...
https://www.w3schools.com/howto/howto_css_parallax.asp
My problem is that the images are filling the width of the screen rather than the div, causing them to be hugely zoomed in with the top and bottom cut off. Is there another way of doing this?
If you want to remove the zoom effect and show the parts of the image that are cut off, you can change the background-size property to:
background-size: contain;
I want to create a login page which has a picture background.
I like this login portal office login page so it's a reference to me. I noticed that on office login page, picture is not affected from vertically or horizontally resize but if i change from the corner it's resizing.
I've tried to change width and height attributes with several types (like; auto, % or vh) but i could'nt find the correct settings for that.
What is the magic behind this? Is there any javascript activities that i missed?
Any ideas?
Use background-size and background-position at the same time to get that:
background-size: cover;
background-attachment: fixed;
I'm working on a website for a friend of mine. There's only one problem. The slider won't fit in the frame without stretching.
I've set it to 100% height, but it won't work out. (Its also responsive)
I want it to be a nice image in the original width and height (100x100, 200x200 etc) without stretching (200x500).
I hope you guys can help me out on this.
I'd tried alot and also asked some other people but they can't help me with this.
You can see the slider over here.
http://tinyurl.com/p36hz6u
Here's another version of the slider, but on this version the slider image gets cut off
http://tinyurl.com/nfjjvwu
If the images are background images, consider using the background-size:contain; which will allow the image to grow as large as visible/possible without stretching, and then you can position the background image wherever desired with background-position
If the slides have actual physical <img /> tags, I made a JSfiddle that demonstrates code that will contain an image within an element. In this example, the <div> tags represent a browser window and can be resized: http://jsfiddle.net/dds27w2y/
Firstly what I would do is to remove the: background-size: 100% 100% and add a background-position: center center.
Then I would add a background-color: white to the container. This would make it look nicer and it would be centered.
Problem occur on Sambungs tables. I have background image set on body.
Css look like
html, body{
background: url('img/background.jpg') no-repeat;
background-position: top; // i tried also cover, fixed etc
}
Webpage is quite high, like over 2000px , where background image takes first 600px, and it could be fine for me, but when i click to hide some box on the bottom of the page, background will automatically appear at the visible part of a screen and it will be eareased from the top of the page. Page isn't realoading during hiding boxes on page, that's why I don't really know how to solve this problem.
Any suggestions ?
Problem solved. I had to input background into div#wrapper. It solved my problem with rendering of background image
Before asking this, I've been googling and trying various things myself....I know this can be accomplished, even though I haven't found a solution anywhwere.
This is the site...
http://spiralout.org
Notice the background image on the body is centrally aligned with the center of the logo (at 1440 wide), yet it's fixed when you scroll. That's great.
How do I make this responsive?
Right now, I'm using background-position at the various breakpoints, but it's not a real solution...for example. It's aligned right now at 1440, but go down to 1280 (the lowest width while keeping 4 columns) or further and you can see what I'm talking about. How do I get the background image to "follow" the logo div?
I've tried using percentages for background-position, but the logo is a different width, and inside the container so it's percentage from the left side of the screen will always vary proportionately to the background image.
I've tried using it as a background-image on the logo div but I don't seem to understand why it doesn't overflow to the top or left. Even if this solution worked, I don't get to keep the fixed position.
Any help is greatly appreciated.
I don't care if the cost/benefit of doing this is ridiculous, or if the solution has to be jQuery, etc. I just want to know how to accomplish it for my own sake :)
If I understood correctly, this is only what it takes me to do it:
body
{
background-image: url('whatever image');
background-repeat: no-repeat;
background-attachment: fixed;
}