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

The many potentials of looping through Sass maps

My sass map contains a variety of color shades, and the full code can be found on Codepen: $pbcolors: ( pbcyan : ( 50: #E5F5FC, 100: #CCEBF9, 200: #99D7F2, 300: #66C3EC, 400: #33AFE5, 500: #009DBF, 600: #008CAB, 700: #007C98, 800: #006D85, 900: #005D72 ...

cssloopsdictionarysass

What causes the position: sticky; property to fail in React implementations?

Currently, I am facing a challenge in making two sidebars sticky so that they will follow as the user scrolls until they reach the bottom of the page. In my current editing project, this implementation seems to be more complex compared to other programs w ...

cssreactjs

Could you please review my PHP code? I encountered a syntax error: unexpected '}' character. Thank you

I encountered an issue in the final line <?php } ?> as it reports a syntax error, unexpected '}' <?php if (isset($_SESSION['u_id'])) { //echo "You are logged in!"; include_once 'database.php&apo ...

phphtmlcss

When I apply a percentage to the height of a div element, it shrinks down to a height

I have several lists with a flex layout. Each column contains 3 list items, and the flex-basis is set to one-third. Within each li element, there is a div for a background image and another div to display text, which should be positioned below the image. ...

htmlcssflexbox

What are some ways to monitor the movement of elements and activate functions at precise locations?

I am working on a project that involves a #ball element which, when clicked, utilizes jQuery animate to move downwards by 210px. The code I currently have is as follows: $('#ball').click(function() { $(this).animate({ top: '+=2 ...

javascriptjquerycss

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

Our web designer has implemented special pages for Internet Explorer by using IE-specific comments. This means that certain stylesheets are only loaded if the user is using a specific version of IE: <!--[if lt IE 7]> <link type="text/css" rel="st ...

javascriptcssinternet-explorerconditional-comments

Height specification in Tailwind Grid

Hi there! I'm currently working on implementing a grid system in NextJS using Tailwind CSS. However, I've hit a roadblock when it comes to automatically sizing the grids to fit the parent element. Let me illustrate my issue with two images below ...

csslayoutnext.jstailwind-csscss-grid

Ways to utilize a single HTML page for various URLs while changing one variable value based on the queried URL

My current HTML page structure looks like this: <body ng-controller="DashboardDisplay" onload="submit()"> <div class="container-fluid" > {{scope.arr}} </div> </body> <script> var myApp = angular.module(&apos ...

javascripthtmlcssangularjsnode.js

Link the Sass variable to Vue props

When working on creating reusable components in Vue.js, I often utilize Sass variables for maintaining consistency in colors, sizes, and other styles. However, I recently encountered an issue with passing Sass variables using props in Vue.js. If I directly ...

javascriptcssvue.jssass

Adjust the width of columns using HTML and CSS

UPDATED: Here is a real-life scenario I am facing: I am trying to adjust the width of columns in my table using inline CSS. Let me provide you with an example: The Table was initially set to 100%, like this: <table width=100% ...> The total number ...

htmlcss

The table is too large for the parent div in which it is placed, causing

Check out this example I have for putting a table in a div and making it fill the div: ex1_jsfiddle table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; height: 100%; table-layout: fixed; } td, th { border: 1px sol ...

htmlcss

Applying CSS link dynamically in NextJS based on the window width

Is it feasible to adjust NextJS link stylesheets depending on media queries in the context of using css modules? Here is an example: CSS module file: @media(max-width: 800px) { .myClass{ /* ...mobile styles */ } } @media(min-width: 800px) { .myC ...

cssnext.jscss-modules

An easy way to enable mobility for BootstrapDialog on mobile devices

Currently, I am utilizing the library available at https://github.com/nakupanda/bootstrap3-dialog in order to create a dialog box. However, my issue arises when viewing the dialog on mobile devices where it exceeds the screen size. On desktops, adjusting t ...

javascriptcsstwitter-bootstrap-3bootstrap-modal

Tips for defining types for specific CSS properties in TypeScript, such as variables

Perhaps there are already solutions out there, and I appreciate it if you can share a link to an existing thread. Nevertheless... In React, when I use the style prop, I receive good autocompletion and validation features like this example: What am I look ...

csstypescript

Unable to configure slick carousel to a 12-column grid in Bootstrap

When attempting to set my carousel to col-xs-12, the columns do not align correctly within the slick carousel in Bootstrap. If I change it to col-xs-6, it works fine but then two grids appear in one row. I require more space for my carousel. Could I be ov ...

jquerycsstwitter-bootstrap

Managing touch devices and animations when hovering

Is there a way to remove or prevent all hover effects on a touch device? I've tried various scripts, but none seem to work for me. How can I test it with dev tools? I attempted this script but received an error: Cannot read property 'addEventList ...

jquerycsshovertouch

I am puzzled by the fact that the center cell of my table is longer than the surrounding cells

I'm currently working on a project that involves creating a webpage. I have a table, and when I execute the code, I notice that the center cell appears longer than the rest of the cells. table,td,tr{border: 1px solid red; } <!document html> ...

htmlcss

Ways to ensure that both the Search text field and search button are of equal height

I am facing an issue with the layout of my HTML code within my ASP.NET MVC web application. Below is the snippet of code causing the problem: <form class="customSearch" method="GET" action="@Url.Action("Search", "Home")"> <input class="searchIn ...

csshtml

AgGrid's magical dropdown feature

Struggling to integrate a bootstrap-4 dropdown menu with AgGrid, I'm facing an issue where the data table overlaps the dropdown when the html is present. Attempts to increase the z-index have not yielded results. Below is the html code snippet: < ...

javascripthtmlcssangular

The bug in Polymer 1.0 where a custom element is causing issues when clicking under the toolbar

Issues have arisen with a custom element I created, named <little-game></little-game>. Here is the template code for <little-game></little-game>: <template> <a href="{{link}}"> <paper-material elevation=& ...

htmlcsspolymerpolymer-1.0