A container adorned with a stylish border, a captivating background image, and a prominent logo positioned

Starting from scratch, I successfully crafted a bordered box and placed the logo in the center.

However, my attempt to add a background image always crashes the entire box.

Here is my current result:

<div style="
float: left; 
  width: 300px; 
  border-radius: 25px;
  border: 2px solid #000000;
  height: 150px;
  position: relative;  
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;">
    <img style="border-radius: 50%; height: 50%;"src="imageURL" />
</div>

https://i.sstatic.net/Z12Zp.png

Trying with a background image:

https://jsfiddle.net/2t3a5wvn/

<div style="
    background-image: url("imageurl");
    float: left; 
      width: 300px; 
      border-radius: 25px;
      border: 2px solid #000000;
      height: 150px;
      position: relative;  
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;">
        <img style="border-radius: 50%; height: 50%;"src="imageURL" />
    </div>

https://i.sstatic.net/dvNSE.png

My desired outcome:

https://i.sstatic.net/SM6wM.png

htmlcss

Answer №1

Ensure to escape the quotes or utilize single quotes within the background-image property. Also, be sure to eliminate the background property.

<div style="
    background-image: url('imageurl');
    float: left; 
      width: 300px; 
      border-radius: 25px;
      border: 2px solid #000000;
      height: 150px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;">
        <img style="border-radius: 50%; height: 50%;"src="imageURL" />
    </div>

Answer №2

Here is the code snippet you requested:

For the CSS:

<style>
    * {
        box-sizing: border-box;
    }
    .box {
        border: 1px solid black;
        border-radius: 25px;
        height: 150px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .center-image {
        position: absolute;
        height: 50%;
        aspect-ratio: 1;
        border-radius: 50%;
        background-color: black;
    }
    .top-image {
        width: 100%;
        height: 50%;
        background-color: red;
        align-self: start;
        flex-shrink: 0;
    }
    .info {
        display: flex;
        justify-content: space-between;
        align-items: start;
        padding: 20px;
        width: 100%;
        flex-shrink: 1;
    }
    .name {
        color: #333;
        font-weight: bold;
        font-size: 30px;
    }
    .distance {
        border: 1px solid black;
        padding: 3px 5px;
        border-radius: 5px;
    }
</style>

And for the HTML:

<div class="box">
    <img class="center-image" />
    <img class="top-image" />
    <div class="info">
        <div class="name">Your Shop Name</div>
        <div class="distance">36 km</div>
    </div>
</div>

Edit: Implementing this code will give a layout similar to the one shown in the image.

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

Is it possible to have multiple divs online that automatically move to the next line when the screen size changes?

How can I ensure that each pair of dropdown and label elements stays on the same line, and moves to the next line based on screen size? Here is my current approach: <div style="display:inline-block; vertical-align:middle; width:100%;"> <div ...

htmlcss

Is there a way to specifically style the element I am hovering over with Tailwind Typography and prose?

Currently, I am customizing my markdown pages with Tailwind typography and prose. I am facing an issue where the hover effect is being applied to all images at once instead of just the one being hovered over. Any ideas on how to fix this? Here is a snippe ...

cssfrontendtailwind-cssmarkdown

Ways to repair the mat-tab header

Within my application, I have five mat-tabs each containing a large amount of data which requires scrolling. Is there a way to fix the header of the tab while allowing the content to scroll? I attempted adding position:fixed; and position:sticky within: ...

cssangularangular-material2

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

Click here to see an example where items smoothly move in a list when one item is removed. To achieve this effect, the element needs to be styled with: .list-complete-leave-active { position: absolute; } I'm curious as to why it doesn't work w ...

javascriptcssanimationvue.js

Automatically navigate to a random link on a webpage with the Selenium Python API

Is there a way to use the Selenium API with Python 2.7 to click on a random link on a specific webpage? Any suggestions would be greatly appreciated. Thank you! ...

pythonseleniumrandomhyperlinkhtml

Navigating through a list of items using keyboard shortcuts in HTML

Similar Question: KeyBoard Navigation for menu using jquery I have developed a menu using unordered list items and display it when the user presses the Enter key in the textbox. While the user can navigate through the menu using the mouse to select it ...

jqueryhtmlcssnavigationcontextmenu

How can I create a progress bar to track my progress in completing tasks?

I am working on a Laravel project focused on task management. My goal is to include a progress bar that tracks the status of each task from start to finish. To do this, I have added a "progress" column in the tasks table which contains an integer value i ...

htmllaraveltwitter-bootstrapprogress-bar

Switch button while moving cursor

I'm struggling with getting this 2048x512 image, which has 4 stages of transition, to work properly. https://i.sstatic.net/1PBvX.png While I know how to switch it to the final stage on hover, I can't seem to figure out how to incorporate a trans ...

javascriptjquerycsscss-transitions

What is the best way to incorporate masks in SVG for Safari compatibility?

My SVG works perfectly fine on desktop and android, but it doesn't show up properly on Safari. The issue seems to be with the mask because when I remove it, the SVG displays as a big rectangle instead of the intended blobs. I have defined a viewbox, h ...

cssreactjssvg

Identify the index of a list item using a custom list created from buttons

When dealing with a dynamically built list like this: <ul id="shortcuts"> <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li> <li><input type="checkbox" value ...

javascriptjqueryhtml

The Dropdown Menu is displaying correctly in Chrome, but is being obscured by an image in Safari

While the Nav dropdown menu functions correctly in Chrome, an issue arises in Safari where the image covers the rest of the menu. This discrepancy between browsers is puzzling. Why does this problem only occur in Safari when it displays properly in Chrome? ...

javascripthtmlcssgoogle-chromesafari

The required keys [:id] are not included in the route matches

As a beginner in Rails, I've encountered similar issues that I can't seem to resolve. Here are my routes: resources :users do resources :items end My model setup is as follows: class Item < ActiveRecord::Base belongs_to :user end cl ...

htmlruby-on-railsrubypathroutes

Display the cover image of the page as you scroll through the content

Trying to implement a scrolling effect where the content covers an image from this tutorial video. The issue I'm encountering is that the image is not a background image but an actual image tag. Here's my current code: <section id="home" clas ...

javascriptjqueryhtmlcssparallax

The Table and Div elements do not have identical widths when set to 100%

I am facing an issue with a Div and Table placed inside a container. Although they are meant to completely fill the container, occasionally there is a one pixel difference which can be quite annoying. I have prepared a test case and attached a screenshot h ...

htmlcss

Updating the src of an iframe and adding an onclick event to a link using JavaScript

Looking to design a page that accommodates both login and sign up functionalities by dynamically updating the src of an iframe. In the navigation bar, there is: <li id="change"><a onclick="sign()">Sign up</a></li> And within the ...

javascripthtmlfunction

Positioning three squares with the same class adjacent to each other by utilizing absolute positioning

I've been pondering whether it's possible to align elements with the same class and position: absolute next to each other. After an hour of experimenting, I discovered a solution: http://jsfiddle.net/hv01ad1r/1/ However, when attempting to use d ...

htmlcss

PHP quiz with results displayed in an aligned manner

I created a html quiz with php as my back-end. Everything is working correctly, but I'm having trouble centering the results on the page. Currently, they are aligned to the left. Can someone provide guidance on how to achieve this? This is my first ti ...

phphtmlcss

Achieve the same height for an HTML table as its parent div by adjusting the table's height when the div's height is not explicitly defined

I am facing a challenge with an html table placed inside a div. The height of the div is determined by other elements within it. Is there a way to make the table's height match that of its parent div? (setting the table height to 100% is not effecti ...

htmlcss

HTML Plant with background removed

I have been attempting to create a tree structure similar to the image provided. However, I am encountering difficulty in getting the background stripes to align properly for a specific row. When resizing the browser window, the stripes do not remain fixed ...

htmlcsstreeview

Difficulty being faced in recognizing anchor tags through CSS selector methods by Mechanize

(Just wanted to check here since I didn't get much response on RailsForum lately.) Has anyone encountered issues with Mechanize not picking up anchor tags using CSS selectors? Here's a snippet of the HTML code: <td class='calendarCell& ...

ruby-on-railscssnokogirimechanizescreen-scraping