Responsive Design: Background Image

Question

Beginner here.

Why is this background image not behaving in a responsive manner? It spans off-screen on my small device. I appreciate any help. Thank you.
https://code.sololearn.com/WvVJ0aO22FTE/?ref=app

Answer 1

font-size:25px;

Answer 2

Tahiti🍷Castillo note: using br tag is not a standard way

Answer 3

Please avoid margin left top .... as percentage if it's not necessary. Please learn flex and grid to center your web layouts

https://code.sololearn.com/W3yzqmyoMaHK/?ref=app

Answer 4

Tahiti🍷Castillo i didn't mean you should use media queries in This code
It was just a general suggestion seeing you somewhat confused in responsive design

Coming to your second question about opacity I suggest you not to use that in body because there is no background opacity in Css yet
i can get the idea what you want
you can create a wrap div element and style it that just like you did for body (just little bit size changes) or by using pseduo css elements

May these can help you
https://css-tricks.com/snippets/css/transparent-background-images/

https://www.freecodecamp.org/news/transparent-background-image-opacity-in-css-and-html/

https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity

Answer 5

Tahiti🍷Castillo

Yeah i edited my prev answer code i think you want this effect i used blur for it because it looks better than opacity you can use anything :)

https://code.sololearn.com/WsgD714HL6E4/?ref=app

Answer 6

Wrap your text inside of a block element. Like div, section.

<footer>
<section class="thought-by">Alan Paton</section>
<section class="year">...</section>
</footer>

☺️

Answer 7

Simba Thank you, Sir. I can’t believe that changing the font size affected the background.

Answer 8

Tahiti🍷Castillo I added a few things like meta shrink-to-fit and adjusted the filter blur and separated the lines with a double break .. I'm sure there are a few more suggestions. I also transparent the blockquote and added a footer as Kelvin Paul drew my attention to.

https://code.sololearn.com/WAyvQLUabfUh/?ref=app

Answer 9

https://code.sololearn.com/WSLZPpBIFgr7/?ref=app

Answer 10

Solomoni Railoa Thank you.

Only for the sake of accessibility, I wanted the font somewhat large. It looks better smaller (somewhat), and when I reduced it to 25px (Simba’s suggestion), my problem was solved. Problem: the background image was not showing fully on the small screen.

I do not want the image to repeat. I learned via W3Schools and elsewhere that background-size: cover will enable the background image to cover the entire page responsively, but it didn’t do so when my font was 50px. I don’t understand how, but reducing the font size worked.

Answer 11

And now there’s a new obstacle. Where do I put my opacity: styling so that the background becomes maybe 50% transparent? I tried various ways, but it only caused the text to disappear. Simba Solomoni Railoa Kelvin Paul

Answer 12

Tahiti🍷Castillo
If you don't your image to repeat and don't want to strech it i think this should resolve the problem

https://code.sololearn.com/WsgD714HL6E4/?ref=app

I suggest to learn about media queries
in CSS

Also Kelvin Paul said try to learn Flex and grid they make things easier :)

Answer 13

Atul Believe it or not, I actually thought about adding a media query or two, but I thought the background-size: cover should be sufficient. Thank you.

Edit: Wow, that looks much better. Thank you.

Answer 14

Wow, that’s nice Atul . I’ve been sitting here trying to get the pseudo div aligned just right. I’m almost there, but I’m going to try the blur. Thanks a million!

Answer 15

Kelvin Paul Thank you for the footer, div, section info! I used it. With each tip, the design process becomes more comprehensible.

Answer 16

Thank you Kelvin Paul . I will study flexbox and grid more.

Answer 17

Background-position:center;

https://code.sololearn.com/W55CO9d8P0H3/?ref=app

Answer 18

Thanks for that tip Kode Krasher ! I will gladly try that.
Edit: I agree 100%. Thanks again!

Answer 19

Kelvin Paul Just using what I have in my developing toolbox. Justifying the text didn’t work, and I know no other way to get the line breaks.

Answer 20

BroFar Thank you! This is fascinating how many different modifications can be made. I think your modifications give the image some depth. I also really like the line breaks! Thanks for the tips.