Creating text on a background image that does not adapt to different screen sizes is

How can I ensure that the text I write on an image stays within the image boundaries on small screen devices for full responsiveness? I've tried setting the image as the background of my div element, but the text overflows. Here is the code I used:

#background {
  background: url("../../imgs/88246.jpg") no-repeat;
  background-size: 100%;
}
<div class="h-100 container-fluid">
  <div id="background" class="row h-100 justify-content-center align-items-center">
    <h1 class="display-4">AYMAN TARIG</h1>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

To achieve this effect, adjust the font-size and image width using the vw unit to ensure they both resize proportionally on different screen sizes. For more information on using the vw unit, check out this link.

Below is a sample code demonstrating how you can implement this technique:

#background {
  background: url("https://images.unsplash.com/photo-1547845737-153b5373560f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2531&q=80") no-repeat;
  background-size: cover;
}

.h-100 {
  height: 20%;
  width: 25vw;
  overflow: hidden;
}

h1 {
  display: block;
  font-size: 6vw;
}

To see a live example of this in action, visit the following CodePen link:

https://codepen.io/MatthewRader/pen/aMrvrx

Answer №2

TABLET

 @media screen and (max-width: 1024px){
 h1 { font-size:SIZETHATFITS}}

PHONE

 @media screen and (max-width: 480px){
 h1 { font-size:SIZETHATFITS}}

@media screen and (max-width: #px) will only control the font size up to the specified max-width.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Html5 canvas not resizing to fit container

I'm currently working on creating a square canvas using CSS to ensure it is instantly sized when the page loads. To achieve this, I am wrapping the canvas in a div and applying the following styles: http://jsfiddle.net/evopgwzd/ body { backgrou ...

csshtmlcanvashtml5-canvas

Is it possible to apply the same styling to multiple elements simultaneously in jQuery by grouping them as in CSS?

Keeping code neat is essential. In CSS, elements can be grouped like this: .element1, .element2, .element3, .element4, .element5, .element6 { font-weight:bold; } I am curious if there is a similar method in jQuery or if each element needs to be set indi ...

jquerycssreadability

Embracing tranquility through the power of Angular

I am new to Angular and trying to use the $resource service to consume data. However, when I open the file in Chrome, only curly braces with expressions inside appear instead of actual values. The REST service is working fine and I can access it directly ...

htmlangularjs

Approach to CSS Layout: Creating Rounded Corners without CSS3 using images on all sides

I am faced with the challenge of creating a CSS layout that must adhere to specific minimum width and height requirements, yet expand to occupy 80% of the browser size. The main div I need to design should have rounded corners, utilizing images due to lack ...

htmlcsslayout

Is it feasible for nested div to remain unaffected by bleeding when the container is positioned relatively and has an overflow hidden

Is it possible to bleed a nested div even when the container is positioned relative with hidden overflow? In this case, giving the nested div a fixed position is not an option. Please check out this unique example: http://jsfiddle.net/s7nhw/11/. If you ...

cssoverflowcss-positionhtml

Having trouble accessing listview capabilities in jquerymobile?

I am currently delving into the world of jquerymobile. I am experimenting with a sample project where I aim to showcase a listview. Below is the code that I have been working on. <!doctype html> <html> <head> <link rel="stylesheet" h ...

jqueryhtmlcsslistviewjquery-mobile

Prevent automatic jumping to input fields

Can someone help me with a problem related to the html input tag or primefaces p:input? I am facing an issue where the cursor always automatically jumps into the input field. The height of my page is such that scrolling is required, and the input field i ...

javascripthtmlprimefaces

Having difficulty incorporating a video into the background

After searching online and attempting two different methods, I am still unable to achieve the desired result. I want a video to cover the entire background of my webpage. Here is what I have tried: CSS - video#bgvid { position: fixed; top: 50%; ...

htmlcssvideobackground

What is the best way to extract data from user input and display it in a table modal?

I need to retrieve all the values from the 'input' fields and display them in a modal table using JavaScript. What is the best way to achieve this? Here is my current script: <script> $(document).ready(function() { ...

javascriptjquerybootstrap-4

Dynamic manipulation of classes based on user attributes

One thing I've noticed is that certain WordPress themes, like 'Thematic', include user-specific classes in the body element to avoid using CSS browser hacks. For example: wordpress y2010 m02 d26 h05 home singular slug-home page pageid-94 pa ...

phpjavascriptjquerycssdynamic

Troubleshooting Issue with Jssor Slider in Internet Explorer 11 due to Relative Dimensions

Encountering an issue with the relative dimensions of the slider container in IE11 (Jssor 18.0). Here is the HTML structure: An outer div with specified absolute dimensions (width and height in pixels). An inner div, serving as the slider's contain ...

htmlcssjssor

When Socket.emit is called, it outputs <span> elements within a well-structured message

Currently working on a small chat application using Node.js, Express.js, and Socket.IO. However, I'm encountering an issue with formatting. Instead of displaying the message content within <span> tags as intended, it is printing out the actual t ...

javascripthtmlnode.jssocket.io

When closing a Bootstrap modal, the modal overlay does not automatically close along with it

Need assistance with a functionality where new requests can be added and existing requests can be edited using a single component that regenerates with the correct data when needed. Below is the code for the base component: home-component.html <ul c ...

angularbootstrap-4bootstrap-modal

Tips for correctly positioning CSS elements:

I am currently working on a slider using noUi Slider and aiming for an elegant solution. To accommodate the large size of the handle, I expanded the base UI with extra values which are not allowed, causing the handle to jump back to the permitted values. T ...

jqueryhtmlcsscss-positionz-index

The process of sending a POST parameter to a page in PHP and opening it

When attempting to open a page using PHP, such as: $html = file_get_contents('https://hammihan.com/search.php'); I encountered an issue where the page was being redirected to https://hammihan.com/users.php due to an empty input for name. To addr ...

phphtml

Linking 2 webpages with a Get Request, utilizing XML, PUG, and Express

I am a newcomer in the field of Web Development and currently facing a challenge with an exercise assigned to us during our initial week. The task involves importing XML data into a basic Node.JS project. In this exercise, I am required to extract data fr ...

htmlnode.jsxmlexpress

Adding content between previous and next buttons with the use of JavaScript

After successfully implementing the functionality for the previous and next buttons in my script, I was requested to include the date between the buttons like this: btnPrev issueDate btnNext < Date > Although I tried adding the date between the PREV ...

javascripthtmljquerycss

Broadcast live video on your website using VLC/Red5 or any other streaming platform of your choice

Currently, my home website is built using Java/SpringMVC web server. I am looking for a way to stream my webcam feed on my website so I can access it from any browser and see the live view of my room. If anyone has recommendations for an easy-to-use solut ...

javahtmlwebstreamingred5

Could someone provide a detailed explanation on the functionality of multiple inline nth-child() in CSS?

In this scenario, there is an example provided: html>body>#wrapper>div>div>div:nth-child(1)>div:nth-child(1)>nav { I am curious about the functionality of this code. Could someone dissect each div, ">", and nth-child()? Your ins ...

htmlcss

Mandate that users select from the available place autocomplete suggestions exclusively

I have integrated the "Places" Google API to enable address autocomplete in an input field on my website. However, since the service is limited to a specific area, I have implemented an autocomplete filter. The issue I'm facing is that users are stil ...

javascripthtmlgoogle-mapsgoogle-maps-api-3google-places-api