Image resizing for different screens

Site URL: http://www.visitnewport.com.au

I've created a main banner image for the site I've designed. However, when the window/screen is resized I would like the text elements (within coloured triangles) to not disappear as they do currently.

To achieve this, I figure I can place 3 images on top of each other; one for the image/collage; one for the bottom left triangle and one for the top right triangle. In this way, the triangles could snap to the boundary/margin. However, I'm lost in terms of coding all this so that it will work when the screen is resized.

Alternatively, is it better just to create a number of different banner images to snap to various break points?

I have an entirely separate screen for mobile, which is working perfectly fine, so I don't need to rethink that element of the site.

Any thoughts on code for achieving this would be appreciated. Screengrabs attached.

Thanks.

Hi,

Have you solved this yet?

Hi, no I haven't. But for now, I'm happy to park it until I resolve a few other issues.

If you can, I wonder if you can help with a problem I'm having with my footer text. For some reason, I believe I've inserted some code somewhere that appears to be affecting the text (some of it is black, when I want all white). I can't seem to find which bit of code is affecting my footer.
I've tried inserting some code to convert the yui blocks, but that doesn't seem to have resolved it.
Sorry, coding isn't my strength.

Not sure if you can help with this, but let me know either way.

The site is http://www.visitnewport.com.au/

On 11/16/2021 at 6:36 PM, DallasDesignsStuff said:

Hi, no I haven't. But for now, I'm happy to park it until I resolve a few other issues.

If you can, I wonder if you can help with a problem I'm having with my footer text. For some reason, I believe I've inserted some code somewhere that appears to be affecting the text (some of it is black, when I want all white). I can't seem to find which bit of code is affecting my footer.
I've tried inserting some code to convert the yui blocks, but that doesn't seem to have resolved it.
Sorry, coding isn't my strength.

Not sure if you can help with this, but let me know either way.

The site is http://www.visitnewport.com.au/

Add to Design > Custom CSS

/* footer text color */
footer.sections p {
    color: white;
}

You're a life saver! Thankyou.

Okay tuanphan, I'm keen to look at resolving the issue I'm having with the header image of the website I'm designing. As stated in my first post, I'd like to either set up the banner so that the image constrains to the width of the site but I'm not sure how to go about that from a coding perspective.

See my original post. At this point, I'm just really wanting to know what the best approach would be to allow the graphics in the image to be legible regardless of screen size.

If I should repost this somewhere else, feel free just to let me know.