I'm not sure if I'm doing this right, the image seems to be overlapping the border

Just dipping my toes into the world of HTML/CSS, so feel free to point out any major errors in my code.

The issue I'm facing is illustrated in this image (Apologies for the black boxes covering up some content; focus is on the top image).

Check out the image here

You'll notice that the picture is overlapping the border. Is there a way to solve this using CSS, or do I need to adjust the image to fit within the border?

Code can be found here

I've scoured the internet for answers and suspect it may have something to do with my use of position absolute or relative. However, I'm not entirely sure, so any guidance would be much appreciated.

htmlcssimageborder

Answer №1

You could try matching the border radius of your "header" element with that of your wrapper, and don't forget to add overflow:hidden for a possible solution.

#header {
 -webkit-border-top-left-radius: 50px;
 -webkit-border-top-right-radius: 50px;
 -moz-border-radius-topleft: 50px;
 -moz-border-radius-topright: 50px;
 border-top-left-radius: 50px;
 border-top-right-radius: 50px;
 overflow:hidden;
}

By the way, using absolute positioning throughout your site may not be necessary.

To centralize your site, simply apply "margin:0 auto;" to your #wrapper element.

All other elements seem to also use absolute positioning. Consider allowing them to flow naturally in the layout using floats instead of relying solely on absolute positioning.

Answer №2

When using the "border-radius" property in CSS3, consider utilizing "background-clip" to control background clipping.

There are three options for this property:

border-box, content-box, or padding-box.

The most suitable choice for your needs may be content-box, as demonstrated below:

#header {background-clipping:content-box}

An informative article on css tricks provides more insight. It's a valuable resource for expanding your knowledge of CSS and HTML.

Answer №3

Since this seems a bit like a school assignment, I won't provide any direct code solutions.

However, there are several ways you can achieve rounded corners for your image. I'll outline them from easiest to more complex:

  • Use the image as a background image for the container element.
  • Apply CSS styling to round the corners of the image itself.
  • (Avoid this one) Generate a new transparent image with pre-rounded corners.

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

Creating interactive tabs within the HTML document with AngularJS

Trying to customize the tab layout on my HTML page and I have a code similar to this: <form name="requestForm"> <div class="form-group col-md-6 md-padding"> <div class="text-primary"> <h3>Create Request</h3> ...

javascripthtmlangularjs

The symbol '★' represents the '★' content in CSS

Here is the CSS code I am using: .rating:not(:checked) > label:before { content: '★'; } However, when it is displayed on the screen, instead of seeing a ★, I see â˜. It's strange because if I use Firebug and manually change the ...

css

What is causing the div element to act as a container?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a1bba3bba5">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0v ...

htmlcssbootstrap-4containers

Is anyone else experiencing issues with the jQuery slide-in not working on a particular website? How can I determine which version of jQuery is compatible with this site?

Essentially, I am looking to have a div box slide in on the page as it loads. This method has worked successfully on other websites and HTML previews that I have tested it on so far. However, for some reason, it does not seem to work on this specific websi ...

javascriptjqueryhtml

Creating a unique layout with CSS: layered divs

I'm struggling with a stubborn layout issue that I just can't seem to figure out... - Left column - Fixed, Static (always in view) - Right column - Fluid/liquid/scrollable --- Header - fixed --- left/main fluid/liquid --- Right/sidebar - fixed ...

csslayouthtmlsticky-footeroverlapping

Guide on how to append input field data to a table using jQuery

My current project involves working with a table, and I have encountered some challenges along the way. Typically, I have 4 input fields where I can input data that is then sent to the table in my view. However, if I exceed 4 values and need to add more, I ...

javascriptjqueryhtmlcss

Align the h2 header vertically within a div container

So, here's the HTML structure that I'm working with: <div class="category"> <div class="container bottom"> <h2>Name1</h2> </div> <div class="container top"> <h2>Name2</h2&g ...

htmlcssvertical-alignment

Issues with Bootstrap Container on Smartphones

Currently tackling the responsive design aspect of my website, however, I've encountered a bug specifically with mobile devices. Interestingly, testing it on my desktop browser proves smooth sailing, but when attempting on my iPhone, I faced some chal ...

htmlcsstwitter-bootstrapmobile

Bootstrap dropdown menu experiencing functionality issues

I am facing an issue with implementing the javascript bootstrap file in my project. The dropdown menu is not working as expected even though I have saved bootstrap to my project folder. I have tried looking at other example codes and even copied and paste ...

javascripthtmltwitter-bootstrap-3

Creating a Border Length Animation Effect for Button Hover in Material-UI

I'm currently exploring Material-UI and trying to customize a component. My goal is to add a 'Border Length Animation' effect when hovering over the button. Unfortunately, I have yet to successfully implement this animation as intended. For ...

javascriptcssreactjsmaterial-uicss-animations

A white background emerges when I select md-dropdown

Lately, I've been experiencing an issue on my website where a white background pops up whenever I click on a dropdown (md-select) in my form. Initially, it only happened with forms inside a modal, but now it's affecting dropdowns across the entir ...

javascriptcssangularjshtmlangular-material

The parent DIV has a height of 0px, yet the child element is still visible

As I explored options for creating a navbar drop down menu with an accordion effect, I stumbled upon this informative YouTube video. The tutorial demonstrated the use of a custom component and manipulation of the max-height property of the card-content ele ...

htmlcssangularionic-frameworkionic3

When clicking on a div with the CSS property user-select set to none, the selected text in a contenteditable element is

I'm currently working on a unique JavaScript rich text editor that utilizes div elements with the CSS property user-select: none instead of traditional buttons. While this approach works perfectly in Firefox, I've encountered a major issue with G ...

htmlcssgoogle-chromecontenteditable

The scrollOverflow feature in fullPage.js is not properly detecting the height of dynamically generated content

I have successfully implemented fullpage.js on my website. Everything is working perfectly with fullpage.js, but I am facing an issue when trying to open a div on click of pagination. Specifically, the browser scroll gets disabled when the div containing a ...

javascriptjqueryhtmlfullpage.js

What is the best way to retrieve data input from my select dropdown?

I have a select menu generated from a database and I want to display the value of the selected option in an input field. Currently, my code only shows the value of the first option. How can I modify it to display all selected values? Thank you. <?php ...

javascriptphphtmljquery

What steps should I take to create a stylish HTML profile with well-organized CSS?

Looking for a way to display photos, biographies, personal details, and more on a webpage? We've got you covered! You can customize the layout using semantic HTML and CSS styles. Build your design online at http://jsfiddle.net/ and thank us later! &l ...

htmlcss

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

React fails to display the content

Starting my React journey with Webpack configuration. Followed all steps meticulously. No error messages in console or browser, but the desired h1 element is not showing up. Aware that React version is 18, yet working with version 17. App.jsx import Reac ...

javascripthtmlreactjswebpack

Ensure that the central section of the slider remains illuminated

Looking for help with customizing my "product" slider, lightSlider. I want the middle div to always be highlighted when navigating through the slider. Here's what it looks like currently: Link to screenshot - current. My goal is to achieve this look: ...

javascriptjqueryhtmlcsswordpress

Refreshing information within a table using Ajax Prototype

For my current project, I am utilizing PrototypeJS. I have implemented Ajax.PeriodicalUpdater to insert real-time data as required. However, I am facing an issue where the data is not getting replaced inside a specific table. Below is the HTML code snippet ...

javascripthtmlajaxprototypejs