I got a PSD design for my website, and I'm having trouble coding the main banner.
This is the page
The top banner (with the image of the little people) doesn't show properly on some screen resolutions. I sliced the entire banner together with the image and set is as a background image, and the text is live. The problem is, on some screens the image appears on top of the text.
How should I code this? I thought of slicing the image and adding it as a regular image element, but that's difficult because the image has a glow around it which blends into the background.
Is there any easier way to do this?
Thanks!
The reason why it does show up properly in certain screen resolution is because your image dimension is 1550x417, and you using CSS background position property to set it to 1300px 400px. That's not a very responsive way to setting background position, and it bound to vary from screen to screen.
There is an easier way to do this. Since the banner is mostly solid color why not slice only the graphic part of the image, and use background color? You can then position the image to the center of the element.
Slice: http://i.imgur.com/2s35JYs.png
Example:
background: url('../images/banner2.jpg') center center no-repeat #ECE8DF;
you should add "center 0" to background style.
#banner {
background: url("../images/banner2.jpg") no-repeat center 0;
background-color: #e8e4da;
height: 400px;
padding: 0;
background-size: 1300px 400px;
border-bottom: 2px solid #fff;
}
Related
I am trying to make the webpage, and I have trouble setting the background image of the webpage. I want my background image to be one full page without cropping or zooming the image or requiring scrolling.
I have my background image with the size of 1920x1080. I thought this size should make the webpage to be one full page, but it did not. What should I do for the image to fit on one page?
background-image: url('image/background1-1.png');
width: 100%;
height: 100vh;
This code is what I have done for the background image, but it crops the image.
Also, I am following the size or location of the images from the design that I did in XD. However, it does not match if I apply it as a code. For example, according to XD, the location of the text is top: 328px; left: 786px, but if I apply this information to my code, the text does not appear where the text is supposed to appear.
I am struggling with these questions.
I would appreciate your help as I do not have much knowledge regarding this topic.
You're looking for the background-size property. If you truly don't want to crop the image at all, use contain, but this will likely not feel like a true background image. cover will enlarge the image just enough to fit within the bounds of the browser window's dimensions, and will crop it slightly when the browser's w/h ratio isn't identical to your images w/h ratio.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
background-image: url('image/background1-1.png');
background-color: #000;
background-position:center center;
background-repeat; no-repeat;
background-size: cover; /* contain */
width: 100%;
height: 100vh;
you can add this
background-image: "url(/meals/3.jpg)",
background-position: "center",
background-repeat: "no-repeat",
background-size: "cover",
I have been trying to fit my background image to responsive view, but all I have been getting is cropped image.
.container_bg {
background-image:url("https://i.imgur.com/qjAvmjN.jpg");
height: 1635px; /*My Image height is 1635 px
}
<div class="container_bg">
A
</div>
Now when I switch to "iphone x" view from chrome inspection
Only top left part is shown, How can I adjust the size of background
as per responsive mode.
I also used background-size:100% auto
It shrinks the image and all my contents goes outside the DIV.
Is there a way, or should I make different image size for responsive?
To make your background stretch over, use background-size to stretch it which will mean you don't need the height and background-position will allow you to center the image in the middle of the screen.
.container_bg {
height: 1635px;
background-image:url("https://i.imgur.com/qjAvmjN.jpg");
background-size: cover !important;
background-position: top center !important;
}
<div class="container_bg">
A
</div>
I have been working on this site below and I am trying to get the banner that is displayed under the navigation menu responsive where you can still see the player in the banner once you scale down to iPhone size portrait.
The code for this area is in the css here.
.tp-page-header {
background-image: url("../images/page-header.jpg");
background-repeat: no-repeat;
padding-bottom: 20px;
padding-top: 20px;}
Website link is here.
http://dagrafixdesigns.com/2019/industrial-darker/about-us.html
This banner is under each sub menu link, other than the home page as it has the slider. I am not sure if anything can be done to the CSS code to make it responsive or it has to be in the HTML as something like the top banner is done.
I have tried it to a degree in the HTML manner, but I didn't have luck.
Not a huge deal as I can get a image color or css color for this background if this wont work, but was thinking it would be nice to use if it responds on scale.
Thank you
Try a combination of background-size: cover; and background-position: 80% 0;. background-size will size the image down to match the container size when it's resized, and background-position will move to the right a little on the x-axis so you can see the football player's head.
I would say to make a smaller version of the image for ex 480 is the iPhone's pixel size, so make it 40 and center it. To show the image when they scale down, use #media (max-width 480px) and inside of the block, set the background image to the new one
I currently have an image that covers some screen resolutions, but if the screen resolution is bigger than the image, it will be white for each pixel its bigger, so instead of that ugly white, I want a color behind that background image so it wont look ugly. My current code is just an img tag for the background and the css scales it up to 100% but if the screen res is larger than the image res, it will create problems.
Is there a specific reason why you're using an img tag as your background image, instead of setting a div to have it's background as that image? Because you can do this with css fairly easily.
.background-div {
width: 100%;
height: 100%;
background: url(your_image_url) no-repeat;
background-size: cover;
background-color: #e3e3e3;
}
Where the .background-div would be in place of your img... This could also be the body of the document, or whatever. It's just a container div that covers the whole background.
The background then has a fallback colour of #e3e3e3, and background-size: cover means that it will always scale the image to fill the screen, so you won't see that colour.
You could also use contain instead, which would make the image scale how you're expecting, and show the background colour where the image doesn't reach.
Find the parent div of your image and add a stylesheet attribute.
It will look something like this
<div class="parent" style="background-color: #000000;height: 100%;width: 100%;">
<img src="your image url" class="image" alt="alt" title="your title"/>
</div>
the attr style="background-color: #000000;" will give the div a black background color.
You can also set the background color by its classname insde you style.css file. Or what ever you named the file.
.parent {
background: #000;
height: 100%;
width: 100%;
}
.parent img {
max-width: 100%;
}
I hope this is the awnser your searching for. If not, provide some more details. Maybe show the structure of your current code.
I have been working to get my company logo image and the background image to both resize according to the size of the screen they are viewed on. However, when I get the background image to resize properly the logo image will not change size at all. But, when I am able to get them both to resize, the logo image is then far too large and covers the width of the entire screen. Then when I change the width of the logo image to be smaller, then the background image shrinks to less than the width of the screen.
Here is the link to the landing page I am having issues with http://www.dorkdungeontestblog002.blogspot.com/
I would like the header image and logo image to produce the following effect while being responsive to different screen sizes, but as you can see by viewing the site, I am not achieving that result.
Hopeful Header and Logo Appearance
If anyone can assist me with this I would really appreciate it, I've been at it for several hours now and it's just not working. Please let me know if there is any further information I can provide as well.
This is all of the code under the Header note...
/*---------[HEADER]---------*/
#header-holder { width:100%; height:auto; float:left; color:#fff; background-image:url(https://lh3.googleusercontent.com/-dYSRZJJhqiM/VibgbmiBMeI/AAAAAAAADIU/OfLCyLyozy4/s1440-Ic42/DD%252520Landis%252520Large.png);background-repeat:no-repeat;background-size: contain;}
#logo-container img {
width: 100%;
height: auto;
background-size: contain;
}
.Page_title{font-family:'Droid Sans';font-weight:bold;font-size:27px;text-shadow:0px 2px 0px #000;width:800px;text-align:center;padding:10px;margin:17px auto 30px auto;}
.Page_content{font-family:'Droid Sans';font-size:13px;width:560px;text-align:center;margin:0 auto;padding:0 0 56px 0;line-height:22px;color:#ffbda4;text-shadow:0px 1px 0px #000}
Wrote here for the editor.
.container,
#front_page_container {
width: 100%
}
In this way the countdown remain centered. But in small resolution is too big, and i don't know if this class are used in another place of the site.
My advice is to change the layout. The template you are using is not responsive at all, so you have a lot of work to make it responsive.