The background image is trapping my text and preventing it from moving forward

As a beginner developer embarking on my first web page project, I've encountered a challenge. The text I inserted into a flexbox refuses to align beneath the image.

.title {
  text-align: center;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  color: white
}

#hero {
  background-image: url("river.webp");
  background-size: cover;
  padding: 10px 0 100px 0
}

body {
  margin: 0
}

.three {
  color: white;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-around;
  padding-top: 100px
}
<div id="hero">
  <h1 class="title">This is Cypress!</h1>
  <div class="three">
    <h4>Lively malls</h4>
    <h4>Challenging Escape Rooms</h4>
    <h4>Relaxing on the lake</h4>
  </div>
</div>

Despite trying to adjust margins and padding, the background image keeps scaling with the text. What solutions can I explore to resolve this issue?

htmlcssspacingblurry

Answer №1

.container {
  border: 1px solid #555;
}

.container > img {
  width: 100%;
}

.header {
  text-align: center;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

body {
  margin: 0
}

.group {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-around;
  padding-top: 100px
}
<div class="container">
  <img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg">
  <h1 class="header">This is Cypress!</h1>
  <div class="group">
    <h4>Lively malls</h4>
    <h4>Challenging Escape Rooms</h4>
    <h4>Relaxing on the lake</h4>
  </div>
</div>

Hey, I concur with @ralph.m that using a normal image tag would be best. I've created a brief example for you, let me know if it helps :) You just need to update the img src attribute to your image.

EDIT:

.group {
    color: #2337EC;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-around;
    padding-top: 100px;
}

.group h4 {
    text-align: center;
}
<div class="group">
  <div>
    <img src="mall.jpg">
    <h4>Lively malls</h4>
  </div>
  <div>
    <img src="escape.jpg">
    <h4>Challenging Escape Rooms</h4>
  </div>
  <div>
    <img src="relax.jpg">
    <h4>Relaxing on the lake</h4>
  </div>
</div>

If you'd like, you can give this a try. I've wrapped each content block in your div.group with a <div> and adjusted the css to center the headings. It might enhance the look, if you're interested in testing it out :)

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

Connect to dynamically generated div on separate page

I am facing an issue with my navigation bar drop down menu that displays event titles fetched from the database. I want users to be able to click on a specific event and have the page scroll to the dynamically generated content for that event. However, it ...

javascriptjqueryhtmlcssajax

What is the process for populating a checkbox with data from a configuration file using JavaScript?

I have a requirement where I need to populate a list of checkboxes with data from a configuration file. To elaborate, if my checkboxes are meant to select sports, within my JSON configuration file I have an array like this: sports: ["Tennis", "Rugby", "S ...

javascripthtmlcheckboxconfig

Understanding page navigation in PHP

Is there a way to validate the inputs on a given page, display error messages if any, and then move to the next page if the inputs are correct? How can this be achieved? <html> <head></head> <body> <?php // define variables an ...

phphtmlvalidationnavigation

Div element positioned outside of another div element

I hate to bug you with more css issues, but I'm really struggling with this one. The problem I'm facing is that a sub div is overflowing the boundaries of its parent div. I tried using: display: inline-block;` but then the outer div goes haywir ...

htmlcss

What is the best way to customize the label of Material UI's Tab component?

Is there a way to customize the text color inside the Tab component while still allowing it to change color when selected as an active Tab? For example: <Tabs centered onChange={handleChange} value={value} textColor={'secondary'} indicatorCol ...

cssreactjsmaterial-ui

Could columns in flexbox be stretched? It's up for debate

When using the "old" flexbox implementation, I would typically employ -webkit-box-align: start; to prevent side by side columns from being the same length. However, I am struggling to achieve the same result with the new specification. More information ca ...

cssflexbox

Collaborative Artistry: Using HTML5, JavaScript, and Node.js for Multiplayer

Creating a multiplayer drawing application for touch-enabled devices has been a challenge. I have utilized Node.js with Socket.io to draw points on a canvas, but there's an issue with the touchend event not resetting properly. To illustrate, take a l ...

javascriptjqueryhtmlnode.jshtml5-canvas

Accessing deeply nested JSON objects in AngularJS

I've been working on an AngularJS single page application and I have successfully fetched files from a JSON. var app = angular.module("MyApp", []); app.controller("TodoCtrl", function($scope, $http) { $http.get('todos.json'). success ...

htmljsonangularjsnested

The content spills out of the container

I'm currently working with a div that displays scrolling text when it overflows. I am wondering if there is a way to hide the scroll bars until the text actually overflows? Additionally, is there a method to make the overflow occur only vertically and ...

jqueryhtmlcss

Efficiently styling table Spans with styled components in React

Can anyone help me with a frustrating CSS problem I'm facing? I am trying to render these tags as spans, but they are not separating properly as shown in the image below. They appear stuck together and I can't figure out why. I am using styled co ...

javascriptcssreactjsmaterial-ui

Trouble with CSS transitions not functioning while altering React state

Each time a user clicks on an accordion, the content should smoothly show or hide with a transition effect. However, the transition only seems to work when opening a closed accordion, not when closing an already open one! To get a clearer idea of this iss ...

javascriptcssreactjsnext.jssass

Why do confirm or alert boxes in Safari on Windows require a double click?

I'm currently working on a simple JavaScript example where I want to display an alert box when an HTML button is clicked in SAFARI. However, I've noticed that it requires a double click to make the alert disappear from the screen. Does anyone ha ...

javascripthtml

When the AJAX function is called again, the previous loading process is interrupted, without the use of jQuery

I have created a function that loads a URL into an element, but it seems to be encountering issues when called repeatedly in a loop to load multiple elements. The current load operation stops prematurely: function loadDataFromURL(url, elementId) { var ...

javascriptajaxhtmlload

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

javascriptjqueryhtmlcsscss-animations

Conceal a row depending on a cell's value being equal to zero

Having an issue with hiding rows that have a zero value in the middle cells. The values in the middle cells are dynamically generated from a Google Spreadsheet. The code below successfully hides rows with zero values that I manually input, but it doesn&apo ...

javascripthtml

Error: Bootstrap/CSS not functioning properly on IE and ED browsers

Currently, I am tackling a web application project, and much to my surprise, I discovered that the CSS/bootstrap is not functioning properly on Internet Explorer and Microsoft Edge. Despite attempting various solutions found on Stack Overflow, none seem to ...

htmlcssinternet-explorerbootstrap-4microsoft-edge

Using the concept of a while loop in PHP, you can easily retrieve the values of Radio Buttons on one page and

Is there a way to retrieve and store radio button values in a MySQL database using PHP looping concepts? $result = mysql_query($query) or die(mysql_error()); while ($row = mysql_fetch_row($result)) { ?> ...

phpmysqlhtml

Insert the ng-if directive into an element using a directive

I am working on an AngularJS directive that involves looking up col-width, hide-state, and order properties for a flexbox element based on its ID. I want to dynamically add an ng-if=false attribute to the element if its hide-state is true. Is there a way ...

javascripthtmlangularjsangularjs-directive

Align images to the left in Typora for a cleaner look

Typora typically aligns all images in the center by default. https://i.stack.imgur.com/TrqIM.png In my search through the github.css, I was unable to locate any instances of img. $ grep img "/Users/me/Library/Application Support/abnerworks.Typora/themes ...

cssmarkdown

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog

I am facing an issue where I have brought a span to display a loading image inside the v-Dialog of a vuejs screen. The problem is that the v-dialog has a z-index of 220 set as inline style, causing my new span (loading image) to appear below the v-dialog. ...

jquerycssvue.jsz-index