What is the best way to insert my words within the boundary?

I am seeking assistance on inserting text within the border I created using an image. As I continue to add more text, I want it to display within the border as I type. Any guidance you can provide would be greatly appreciated. Thank you! 

li {
  list-style-type: none;
  display: inline-block;
  font-size: 20px;
  letter-spacing: 4px;
  width: 150px;
}
.main-nav a {
  text-decoration: none;
}
.main-nav {
  border-bottom: 2px solid black;
  border-top: 2px solid black;
}
a:link {
  color: #008B00;
}
a:visited {
  color: #008B00;
}
p {
  font-size: 20px;
}
#main-border {
  text-align: center;
}
.searchbutton {
  font-size: 20px;
}
<div id="main-border">
  <p>Hello there! I'm excited about starting school soon!</p>
  <img src="../desktop/background.gif" alt "border" height="500px" width="550px">
</div>

htmlcss

Answer №1

It seems like you might be looking for this:

<div id="main-container">
  <p>Hello, my name is Marika and I am eager to start school!</p>
</div>

#main-container {
   text-align: center;
   background : url(../static/background.jpg);
   background-size : cover;
   min-height : 500px;
   min-width : 500px;
}

Answer №2

Is this how you want it? Feel free to customize the style

var location=document.getElementById('txtplace');
function insert_text(text){
  location.innerHTML=text;
}
#txtplace{background-color:grey;opacity:0.8;font-size:150%;position:absolute;top:100px;left:50px;}
<input type="text" id="text_to_insert" onkeyup="insert_text(this.value);"/>
<span id="txtplace"></span>
                       <img src="http://lorempixel.com/600/600" id="background">

Answer №3

It seems like this code snippet may help you achieve your desired outcome, just swap out the kitten image with your own:

.THIS {
  background-image: url(http://placekitten.com/g/500/500);
  background-repeat: no-repeat;
  height:500px;
  width:500px;
}
<div id="main-border">
  <p class="THIS">Hi! My name is Marika and I am excited to join the school soon!</p>

</div>

Answer №4

Although this answer is a bit late, if you're looking to insert text within a border, you can achieve this by using absolute positioning. Here's an example of how it can be done: http://jsfiddle.net/vo7jzz4m/

div{
width:200px;
height:200px;
background:url('http://placekitten.com/300/301') no-repeat;
background-size:cover;

border:8px solid transparent;
outline:1px solid blue;
}

div:before{
top:0px;
position:absolute;
content:"Hello";
}

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 functionality of the dynamic text box is disrupted when a form element is added

I am in the process of developing a form and am looking to create dynamic text boxes using Bootstrap. The code that I have currently works as expected: $(function() { $(document).on('click', '.btn-add', function(e) { e.preventD ...

javascriptjqueryhtmltwitter-bootstrap

Ways to Retrieve JavaScript Variable inside HTML Tags in a JSP

I am currently facing a requirement where I must assign js variables to html input tag ids. For example: <input type='text' id='(here I need js variable)'/> I am aware that one way to achieve this is by creating the entire elem ...

javascripthtmljsp

Ion-List seamlessly integrates with both ion-tabs and ion-nav components, creating a cohesive and dynamic user interface

On my homepage, there is an ion-list. Sometimes (not every time), when I select an item in this list or navigate to the register page using "this.app.getRootNav().push("ClienteCadastroPage")", and then select an input in the registerPage or descriptionPage ...

htmltypescriptionic-framework

PHP Email Styling Techniques

While working on a website, I encountered an issue with the automated email sent upon registration. The email was displaying the CSS code. $body '<span style="color:#444444;">Header</span>'; I attempted to use a code from online tha ...

phphtmlcssemailstyles

Organizing an angular expansion panel

I am currently dealing with an expansion panel that has a lot of content. The layout is quite messy and chaotic, as seen here: https://ibb.co/Y3z9gdf It doesn't look very appealing, so I'm wondering if there is a way to organize it better or ma ...

cssangular

What is the best way to ensure a div container fills the entire height of the screen?

I am currently working on developing my very first iOS HTML5 app, which is a simple quote application. One challenge I am facing is how to set the height of my container div to match that of an iPhone screen. You can view the design I have so far on this j ...

htmlcss

Adjust the color of the text for the items in the drop-down field on the WooCommerce

https://i.stack.imgur.com/CHJUz.png It appears that the font color on my main website is white. However, on the WooCommerce Checkout Page, all drop down fields' items are also displayed in white, making it difficult for users to see the options witho ...

htmlcsswordpresswoocommercecss-selectors

Integrate JavaScript into your HTML code

I'm a beginner in HTML and am working on creating a login form. Here is the code that I have written so far. I need help with importing my JavaScript code into the HTML form. C:\Program Files\xampp\htdocs\forsiteSystem\thems& ...

javascripthtml

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

htmlcssdrop-down-menu

Issues with jQuery animate.css functionality specifically occurring on Firefox browser

As a beginner in jQuery, I have been exploring different animations and recently came across an issue with Firefox compatibility. I discovered the animate.css library, and decided to incorporate its animations into text captions on a slider using the Soli ...

jqueryhtmlcssanimationwordpress

What is causing my `<nav>` buttons to be left-aligned?

The attempt to center the buttons in the viewport using text-align:center for nav, ul, and li has proved ineffective. The alternative of nav {text-align: left;} was no more successful. CSS Snippets: #container { width: 100%; background-color: bla ...

htmlcss

What is the process for retrieving matched information from a drop-down menu in HTML?

Is there a way to retrieve data from angularjs like this: This is the list of data I need to access: $scope.orderStatus = [ { os: 'Open', value: 1 }, { os: 'Completed', value: 2 }, { os:'Cancelled',value: 3 }, ...

javascripthtmlangularjsnode.js

Combining two divs to share the same linear gradient and shadow effect

Greetings to all our valued partners! I am seeking guidance on how to achieve the following task for a web application I am developing: Within my webapp, I have designed a stylish NavBar similar to the examples depicted in the images (in AdobeXD it is di ...

htmlcssmergeshadow

Get the application/pdf document that was just sent to you from the software backend

I am facing an issue with downloading a PDF file sent from the backend. Upon receiving a blob response, I notice that when I download and view the file, the sheets are empty, matching the expected number of sheets. Could this be a coding problem? Current ...

javascripthtmlvue.jspdfaxios

Centered text with custom images in an HTML list

I'm experimenting with customizing lists and currently using a custom list-style-image. I'd like to know how to center the text and image so they are always aligned, even in the case of multi-line text. I've included a picture for reference. ...

htmlcss

Input form and select form collide in conflict when the "Enter" key is activated

My search box includes input forms and a select form with various options. The issue arises when using the place autocomplete feature from Google Maps alongside the select form. When the enter key is pressed after entering a location in the autocomplete fi ...

javascriptjqueryhtmlformsbackbone.js

Design a unique border for a div element that extends a top-border all the way through the header and a bottom-border that

I am trying to achieve the design displayed in this mockup: https://i.sstatic.net/sYEPu.png Here is my current progress: https://codepen.io/raney24/pen/VOmjBY .header-border { width: 100%; margin-bottom: 10px; border-left: red solid 1px; border ...

htmlcssborder

The data type 'string' cannot be assigned to the data type 'Position'

Currently, I am in the process of converting React js to typescript. The component being used is a Class Component. I would like to obtain CSS settings through props and apply them to an element. How can I resolve this issue? render(){return( <span st ...

cssreactjstypescript

Transferring Data Between Tables in ASP.NET Core

I'm in the process of creating a new online store with ASP.NET Core. I have a requirement to transfer data from the Products table to the Items table upon clicking a button, so that the item information can be displayed on the shopping cart page. Any ...

htmlasp.net-core

Issues with navigation menus in Bootstrap/Wordpress

My mobile drop-down menu is giving me some strange issues. When you toggle the button, the menu briefly appears just below the button before moving to its correct position. Sometimes it doesn't work at all, and clicking has no effect. You can witnes ...

javascriptcsswordpressbootstrap-4