I'm trying very hard to resize my background images with my personal website: calebcharles.com.
I can't tell if this is something that needs to be done with a background-size: fix in CSS or if I need to create alternate images for media-query based fixes. I'm a new designer so please go easy! I'd sincerely appreciate a nudge in the right direction. Here is an example of one of the sections of my site:
h1.slide1 {
padding-top: 10%;
color: white;
background-image: url("images/rainbow.jpg");
background-position: 50%;
margin: auto;
padding-bottom: 10%;
text-align: center;
font-family: 'Amatic SC', cursive;
font-size: 400%;
background-attachment: fixed;
background-size: 100% 100%;
-webkit-background-size:100% 100%;
background-repeat: no-repeat;
}
full site is www.calebcharles.com. The backgrounds look awful on mobile devices. Please help!
What you have is a background that is spread to 100%. The background itself is a widescreen 1920x730 image while mobile resolutions are generally portrait.
Look into media queries and have multiple background resolutions pre-rendered.
.slide1 {
background-image: url('images/rainbow.jpg');
}
#media (min-width:768px) {
.slide1 {
background-image: url('images/rainbow-768.jpg');
}
}
#media (min-width:1920px) {
.slide1 {
background-image: url('images/rainbow-1920.jpg');
}
}
#media (min-width:2560px) {
.slide1 {
background-image: url('images/rainbow-2560.jpg');
}
}
Related
Original look of the website on mobile
Now, when I apply a css code;
div.masthead-banner.data-bg {
background-size: contain !important;
}
I get this, On the mobile site the full banner appears with a lot of grey space above and below it:
After css fix is applied
However, I would've wanted the image to completely fill the div, is there a way I can achieve this? Thank you.
Website is http://naturessecrets.club
Better to reduce height of banner and make background-size: cover on it.
.site-title a {
font-size: 40px;
}
div.masthead-banner.data-bg {
background-size: cover !important;
}
Here is it
You can set the background-size to 100% but this will stretch your photo.
I would use different sizes for different devices. Just like this:
body {
background-image: url('img_test.jpg'); }
#media only screen and (min-width: 400px) {
body {
background-image: url('img_test.jpg');}}
You can use this css
#media only screen and (min-width: 479px) {
div.masthead-banner.data-bg {
background-size: cover;
height: 240px;
display: flex;
align-items: center;
}
}
I want to display two different background images per device, have a code, but it doesn't work properly...
where is a bug?
#media (max-width: 720px) {
body {
margin: 0;
background-color: #ff0000;
background-image: url('img/bg1.jpg');
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
}
}
#media (min-width: 721px) {
body {
margin: 0;
background-color: #303441;
background-image: url('img/bg2.jpg');
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
}
}
Check the path to your first image. My images work as it should.
And I agree with Dan Weber, the code can be simplified:
body {
margin: 0;
background-color: #ff0000;
background-image: url('http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg');
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
}
#media (min-width: 721px) {
body {
background-color: #303441;
background-image: url('http://glebkema.ru/images/2015_09_26_iphone_198_x400.jpg');
}
}
Just curious, why are you mixing min-width and max-width?
Usually, max-width is used when targeting desktop first and then working down to mobile.
min-width is used to target mobile first and work your way up to desktop.
http://www.the-haystack.com/2015/12/23/choosing-between-min-and-max-width/
I've changed the exact screen size a bit since 1px is harder to get difference on when resizing, but same concept. Run this in full page mode.
So, everything lower than 720 (mobile first) gets first image by default. When screen hits 720 it changes and then again at 820 and up.
body {
margin: 0;
background-image: url('http://www.dreamstime.com/static/free2/257779.jpg');
background-color: #FFF;
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
}
#media (min-width: 720px) {
body {
background-color: #ff0000;
background-image: url('http://pic.1fotonin.com//data/wallpapers/7/WDF_562760.jpg');
}
}
#media (min-width: 820px) {
body {
background-color: #303441;
background-image: url('http://images.all-free-download.com/images/wallpapers_large/old_farm_wallpaper_landscape_nature_wallpaper_1439.jpg');
}
}
Here is good youtube video explaing difference between min-width and max-width.
https://www.youtube.com/watch?v=Gi3INcPOvo8
The website has a section, which has a background image. In the desktop website to make it look good, background image was made fixed so that it can have parallax effect. But in the mobile website, parallax does not make sense. So I wanted to remove the fixed in the mobile view. Here is the code I have tried.
<section class="girl-cover-photo">
</section>
.girl-cover-photo {
height: 730px;
background: url("../img/girl-cover.jpg") fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 768px) {
.girl-cover-photo .girl-cover-photo {
background: url("../img/girl-cover.jpg") relative;
}
}
But somehow the parallax shows up in the mobile view. Any pointers on what to do to fix this?
instead background: url('../img/girl-cover.jpg') relative;
use background: url('../img/girl-cover.jpg') scroll;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
.girl-cover-photo{
height: 730px;
background: url('http://media02.hongkiat.com/baby_photography/baby_photography.jpg') fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 768px){
.girl-cover-photo{
background: url('http://media02.hongkiat.com/baby_photography/baby_photography.jpg') relative;
}
}
<div class="girl-cover-photo"></div>
Try this
Hi guys I'm using stellar.js and it is working quiet well for desktop devices. But on mobile devices the background-image will be displayed only a part of it. It is not showing the whole image but the left corner of the image. The problem must be the css code. But I don't see it. Thanks for the help guys!
My css looks like:
.intro-section {
padding: 150px 0px;
text-align: center;
background-attachment: fixed;
width:100%;
height:100%;
position: relative;
background-position: center center;
background-size: cover;
background-image: url(../images/frederick_meseck_wood_logo.png);
background-repeat: no-repeat;
}
#media(min-width:768px) {
.intro-section {
min-height: 100%;
}
}
Try this in your media query:
#media(min-width:768px) {
.intro-section {
background-attachment: inherit !important;
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
The first background-size parameter is the width, you can increase this value when going to smaller devices (I recommend this)
I am trying to create a Reddit page using CSS. My problem is scaling. I want to make an object, .side, smaller in length. On my 1080p monitor, it looks great, but when I zoom in or out it will not scale with the browser. It is also too large on mobile.
Here is the code:
#header {
background: url(%%rtv6a%%);
background-repeat: no-repeat;
background-position: -3px 24px;
height: 130px;
}
#header-bottom-left
{
position: absolute;
bottom: 0;
}
div.side div.spacer:nth-of-type(5)
{
background:url(%%tangoglobe4%%) top center no-repeat;
padding: 250px 0 0;
margin-top: 20px;
}
div.side div.spacer:nth-of-type(5):hover
{
background:url(%%goglobal4%%) top center no-repeat;
padding: 250px 0 0;
margin-top: 20px;
transition: .6s;
}
body, .side, .titlebox form.toggle, .leavemoderator, .icon-menu a, .side .spacer
{
background:url(%%whiteticks%%);
}
.sitetable
{
background:url(%%ticks%%);
}
.morelink .nub
{
display: none;
}
.sitetable
{
max-width: 83%;
border-color: #5C5C5C;
border-style:solid;
border-width:1px;
}
Here is what I want it to look like: http://i.imgur.com/CM1Ejgp.jpg
When I scale it: http://i.imgur.com/HGsnSvD.png
You will notice the grey box get farther and father away. What can I do to fix this?
Sorry, I am new to coding.
You might want to look into media queries:
Media queries look at the capability of the device, and can be used to
check many things, such as:
width and height of the browser window
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
and much more
You can use media queries to set sizes and widths of text or containers in CSS depending on the size of the browser. Eg:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries