CSS rule: The behavior of my specified property is not being implemented

I have inserted an image directly into my HTML code, which serves as a small profile picture. I am attempting to position this image in the top right corner of my website, but no matter what CSS property I apply, the image refuses to budge.

body {
  font-size: 14px;
  font-family: 'Noto Serif', serif, Arial;
  background-image: url(image/background1.jpeg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.first_part {
  text-align: center;
}

.flottant {
  background: top right;
}
<div class="first_part">
  <h1>Roger Albert</h1>
  <p>Entrepreneur, author, and co-founder of OpenClassrooms</p>
</div>
<img src="image/13531.png" class="flottant" alt="Profile picture" />

css

Answer №1

If you're looking to customize your positioning, CSS flexbox is a great option to explore. In the meantime, you can achieve a simple solution using position: relative, float: right, and bottom: 75px. Check out the code snippet below:

body {
  font-size: 14px;
  font-family: 'Noto Serif', serif, Arial;
  background-image: url(image/background1.jpeg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.first_part {
  text-align: center;
}

.flottant {
  float: right;
  position: relative;
  bottom: 75px;
}
<div class="first_part">
  <h1>Roger Albert</h1>
  <p>Entrepreneur, author, and co-founder of OpenClassrooms</p>
</div>
<img src="image/13531.png" class="flottant" alt="Profile picture" />

Answer №2

It seems like your layout is a bit scattered :) I suggest checking out some tutorials on HTML and CSS fundamentals. Here's what you can do:

  1. First, wrap your image in a container:

    <body>
    <div id="container">
        <img src="image/13531.png" class="flottant"  alt="Profil picture"/>
    </div>
</body>

  2. Next, add position:relative; to the container, and then use 

    position:absolute; top:0px; right:0px;
    for the element you want to position.

  3. Set the size of both the body and container to 100% of the viewport using 

    body, #container { width:100%; height:100%; }
    .

Take a look at your code, particularly the attributes in the body tag that may be conflicting with background properties. If you were working with a background image instead of an HTML tag, you would use background-position: top right;.

For more guidance, visit https://www.w3schools.com/.

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

Different ways to position two header tags on top of each other instead of next to each other

I am attempting to adjust the placement of my header tags so that the second header sits directly below the first one, rather than side by side. Currently, I am using h1 and h2 tags for my headers. I have experimented with placing both headers inside an h ...

htmlcssheadertags

Learn how to cycle through three different texts that appear in the same spot using smooth transitions

I am working with three different rows that contain the Typography component. My goal is to display the first row, followed by the second, then the third, and back to the first one in a continuous loop. All three rows should be shown in the same location, ...

javascripthtmlcssreactjs

Ways to align and fix a button within a specific div element

How can I make the button with position: fixed property only visible inside the second div and not remain fixed when scrolling to the first or last div? .one{ height:600px; width: 100%; background-color: re ...

javascripthtmlcss

Navigation dropdown menu with the latest Bootstrap 4 features

Attempting to recreate the design from Codepen using Bootstrap 4. The current progress can be viewed in this Codepen (drop down with 2 columns), which is assisting with online tutorials. Here's the HTML for the Navbar: <nav class="navbar navbar- ...

jquerycsstwitter-bootstrapbootstrap-4

Attempting to isolate just a fragment of the inner content

Option Explicit Sub VBAWebscraping2() Dim IEObject As Object Set IEObject = New InternetExplorer IEObject.Visible = True IEObject.navigate url:="https://streeteasy.com/building/" & Cells(2, 4).Value ...

htmlcssexcelvba

Strange Behavior of HTML5 Audio Elements

I'm currently in the process of designing a shop website with a nostalgic Windows98 theme. On the product's page, I want to include a preview of audio. Here is the CSS code that I have used for the HTML5 audio element: audio::-webkit-media-contr ...

htmlcssaudio

Implementing CSS counter-increment with jQuery

Is there a way to use jQuery to set the CSS counter-increment attribute on ".demo:before" even though jQuery cannot access pseudo elements directly? I recall seeing a suggestion on Stack Overflow about using a data attribute and then referencing that value ...

javascriptjquerycsscountercss-counter

Overflow issue with floating labels in Bootstrap 5 within a grid container

Incorporated within this code snippet are floating selects placed inside a bootstrap grid: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae7fae7">[emai ...

htmlcsstwitter-bootstrapbootstrap-5

What causes the circular progress bar to disappear when hovering over the MUI React table?

My goal was to create a table with a CircularProgressBar that changes its background color from orange to dark blue when hovering over the row. However, despite my efforts, I couldn't get it to work as intended. Additionally, I wanted the progressBar ...

javascripthtmlcssreactjsmaterial-ui

Arrangement of images in an array

Here's the scenario I'm facing. https://i.stack.imgur.com/FbAfw.jpg So, I have an array of images that I want to use to create a gallery with a specific layout. I've tried using grid and playing around with :nth-child(even) and :nth-child( ...

javascriptphpcssarraysforeach

Drawer in Material-UI has whitespace remaining at the corners due to its rounded edges

While using the Material UI drawer, I attempted to round the corners using CSS: style={{ borderRadius: "25px", backgroundColor: "red", overflow: "hidden", padding: "300px" }} Although it somewhat works, the corners appear white instea ...

javascriptcssreactjstypescriptmaterial-ui

Customer uploaded an image to the WordPress header but it is not aligning correctly

Trying to align an image added by my client in the WordPress header. As someone who is still learning CSS, I'm struggling to get it exactly where we want it. Visit the site here The Options House graphic currently sits on the right. My goal is to ha ...

htmlcsswordpress

From Table to DIV: A Simple Conversion

I have encountered a major issue that has stumped me so far. Perhaps you can assist me. I am dealing with a table that appears as follows: __________________________________ | | time1 | time2 | time3 | +--------+-------+-------+-------+ | John | ...

javascriptphpjquerycss

Is there a way to display the avatar image outside of the drawer in MUI ReactJS?

Currently, I am attempting to display the avatar image with a curved effect outside the border line of the sidebar. I have referenced the persistent drawer from MUI v5 for inspiration. You can view an example here: the codesandbox link The desired outcom ...

cssreactjsflexboxreact-hooksmaterial-ui

After running assets:install and assetic:dump, Font Awesome fonts are no longer functioning properly

Setting up a site on shared hosting has been going smoothly, except for the FontAwesome icons which Symfony is having trouble finding in their designated locations. The steps I followed to move the site to production on shared hosting are: To overcome th ...

phpcsssymfonyassetic

Issues with displaying form/button glyphicon when using a fixed table header in Bootstrap

I have a situation where I have a table with a fixed header. In one of the columns, there are delete buttons within a form. The table structure is as follows: <div class="panel panel-default table-responsive fixedHeader"> <!-- Table --> &l ...

htmlcss

Ways to conceal specific content within a text using CSS

Help me with the updated code <html> <title>css</title> <head> <style> #st { z-index: -114; margin-right: -80px; } </style> </head> State Code : <span><span id="st"></span>Maharashtra - MH ...

htmlcss

I encountered an issue with my h3 element's margin not being applied properly when I attempted to add

I'm facing an issue with the margin for <h3> tag in my HTML code. I want to create some space between the form and the h3 element. Here is the CSS: *{ margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } body{ background-ima ...

htmlcss

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: Current Situation: #newOrderControl { border-style: solid; border-color: black; b ...

htmlcss

CSS for decorating an image with a border and transparent background

Struggling to add a border while converting a PSD to HTML? Is it possible to apply a border to an image with a transparent background? For instance, let's consider the following image: Imagine wanting to place a border around the caret in the image l ...

htmlcss