Setting background size is making background image disappear

Can someone explain why setting the background size of my bg image is making the image disapear?

.mainad {
    background-image: url('../images/aliensbg.png'), linear-gradient(0deg, rgba(37,42,38,1) 0%, rgba(37,42,38,1) 11.9%, rgba(255,255,255,1) 11.9%);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat, repeat-x;
    border-bottom: #88bfe8 100px solid;
    padding: 0;
    
}
.mainad {
    background-image: url('../images/aliensbg.png'), linear-gradient(0deg, rgba(37,42,38,1) 0%,      rgba(37,42,38,1) 11.9%, rgba(255,255,255,1) 11.9%);
    background-position: center;
    background-size: 1920px 664px;
    border-bottom: #88bfe8 100px solid;
    padding: 0;
    
}

https://www.w3schools.com/cssref/css3_pr_background-size.asp

1 Like

Which version of the class is causing your problem?
Both work as expected (unless you expected something else).
But again we don’t know the html you are applying it to.

https://azteramaikoa.000webhostapp.com/

I’ve tried using background size: 100% 100%, and other suggestions on other sites. My image disappears when I don’t set a px height to the background image. I would optimally like to use just one image and for the image to resize with the browser. This is my first website using flex. The media quieries also are not working at the correct cut off point within my browser, and I can’t get the social icons in the footer to display in black.

The maiinad .

Give me some time to look at it, please.

Hello!
I have the same problem. I am developing the design of my page.
And I face the same problem. I have a lot of work on this. I have so far decided to postpone this issue for later. I will be glad for your tips

Post deleted. OP’s code appears to have changed.

Not sure what the question is now either?

The image for mainadmobile is not showing because there is a typo in the url.

https://azteramaikoa.000webhostapp.com/images/aliensmobilebge.png

It should be:

https://azteramaikoa.000webhostapp.com/images/aliensmobilebg.png

You don’t need to create extra elements for mobile just change the image and other rules in the media query and avoid that display:none nonsense.

Seems pretty straightforward to me unless I misunderstood.

.socialicons .fab{color:#000}

1 Like

Yes I changed the png image to a jpg after I asked the question and before you answered, and then went to bed before I updated the css file(because the png was too pixelated). Sorry. But that’s not my issue. I think you misunderstood me. I would like to be able to use just one .mainad graphic that resizes as the user resizes the viewport. My issue is that when I use different variations of code to set a height for the background image other then px the element collapses, and the graphic vanishes. I’ve tried background-size: 100% 100%;, Height: 100%;, Max-Height: 100%;, Display: Flex, etc… I also don’t understand why the .fab selector is necessary to change the color of the .socialicons in the footer. I was able to change the color of the icons elsewhere on the page without specifying .fab. I would also like the logo to resize with the viewport however I have the same problem with any variations of code that I have with the .mainad background.

I’ll answer in full tomorrow as I am on a mobile at present but the issue is that you don’t properly understand how percentage height works or how images can only fit a viewport if they are cropped in some way (as with background-size:cover). You can’t stretch an image unless you break its aspect ratio and then it will be stretched or squished.

Percentage height can only be based on a parent that has a height defined and so on back to root which is why height:100% will in most cases revert to auto height which without content will be zero. You can use the vh unit instead which will give you a full viewport height but of course that means a full viewport so the element has to start at the top of the viewport of course and there must be no margins or padding in the way.

I’ll reply tomorrow with a better explanation when I get back to my computer :slight_smile:

1 Like

O.k. another thing is that when I try to set the body to 100% height and width with the html the entire page collapses. I want the image to scale with the viewport within the same aspect ratio. I’ve seen numerous sites with images that do that both using flex, and tables. I can’t find a tutorial on this specific type of scaling though.

You can’t set the body to 100% height unless you also set the html element to 100% height as I explained in my last post. It’s much safer these days to use the vh unit as that is always related to the viewport height. (height:100vh).

You don’t need to set body width to 100% either as it will automatically fill the viewport width by default.

That’s impossible as I already explained. You can use the ‘cover’ value of the background property which will ensure your image is not distorted and at the same time will cover the whole element. However in order to do that for all viewport shapes the image will be cropped in one direction. This is not a css limitation but simply the laws of the universe. You can’t magically change an image to fit all aspect ratios and still look the same— it has to be cropped to do this meaning you need to choose your image carefully so that it does not matter if the sides of the image are outside the viewport.

You do not need flex or tables to do this just a div with min-height of 100vh will do. You must choose a suitable image for this task.

For art direction you can of course swap the images for smaller viewports if needed but don’t go overboard with it.

Generally a well chosen image can suit all.

Like this:

2 Likes

I solved the problem by using a clear png image in the HTML file inside the .mainad class and setting the height to auto, and width to 100% however there has to be a way to set the height of the .mainad to auto, width to 100%, and then setting the height of the background graphic to auto, and max-width to 1920px. If you notice I used a liner gradient underneath the .mainad graphic.

.mainad {
    background-image: url('../images/aliensbgb.png'), linear-gradient(0deg, rgba(37,42,38,1) 0%,     rgba(37,42,38,1) 11.9%, rgba(255,255,255,1) 11.9%);
    background-position: center;
    background-size: cover;
    height: auto;
    width: auto;
    background-repeat: no-repeat, repeat-x;
    border-bottom: #88bfe8 100px solid;
    padding: 0;
    
}

.clearimg {
    width: 100%;
    height: auto;

Another thing is shouldn’t the … in HTML 5 be one period since the images folder is located directly in public html.

We stopped using image hacks like that in the last century :slight_smile:

If the image is content then it should be in the html as an img tag. If it is decoration only then it should be in the background.

You seem to be moving the goalposts now and talking about maintaining aspect ratios for the background image rather than having an image fill the viewport.

You can maintain an aspect ratio for an element using the percentage padding hack or pseudo element hack.

1 Like

If you are talking about the background image path then that is relative to the css file location not the html page.

The image is decoration and 1920px wide, and the linear gradient is 100% wide and behind the image. No I meant maintaining the aspect ratio for the background image and not the linear gradient. I placed them both in the same class because the image is semi-transparent and I wanted a symbol to overlap the dark grey bottom horizontal bar for decoration, and also so I can change the graphic to a video. That makes it easier for me to create a semi-transparent video, in After Effects or Animate, and rotate the videos while maintaining the symbol overlapping the border. I hand draw the graphics first, and then ink and color them in Illustrator, and then bring them into After Effects or Animate so I’m not even sure what I will do for a video because I don’t know what will look better yet with the page layout. Those might not even be the drawings or graphics that I use. I’m just trying to build a responsive site that is easy to update, colors, videos, etc. while maintaining the overlapping symbol. This is my first website using Flex. I also started using Grid but just opted for Flex because I have 2 rows in the header with 3 columns and I started to encounter issues with Grid when trying to make the center columns 50% wide, and the side columns 25% wide and opposed to all 1/3 and then having a 2nd row 100% wide and with only 1 column. The Flex coding just seemed quicker and more appropriate because this isn’t a text or content driven website where I need sidebars filed with articles, search bars, CMS functionality, vertical navigation, etc… I was mostly concerned with my visual layout being as close to my Illustrator Design as possible, and responsive while having at least one impressive visual element because I’m only one person, and making one animated video, and adding a decorative gallery, etc. will take me a few days. Like I hand drew the background, buildings, symbols, etc. in relation to the page layout first, and also made the icons above the lorem text, etc. so that also takes me some time. I don’t have anyone to help me. I have a Godaddy Managed Wordpress site also, but that one looks too visually dull to me, and is unnecessarily difficult to edit the free themes in a satisfactory way. I also have a Wix site which is o.k…

Yes that can be done as I have linked to above and no need for an erroneous image tag in the html. You would just add this code taken from the link above.

.mainad:before{
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-top: calc((665 / 1920) * 100%);
}

.mainad:after { /* to clear float */
  content: "";
  display: table;
  clear: both;
}

<div class="mainad"></div>

However I also dislike empty elements and your image has the words ‘Multi Media design’ incorporated into it which in my mind suspiciously looks like content and should probably be an html image with an alt attribute saying as much.

2 Likes

I don’t know what I want to put in the empty Flex container at full viewport size yet if that’s what you are referring to but I intended to place something there also…

The main image is going to be a video anyway. That’s just a placeholder. So the text may be different I don’t know yet. Either an After Effects MP4 or some Animate format.

What do you think is the advantage of rewriting the code this way if the image is scaling smoothly with the clear image visually? Why is the float necessary?